Я ищу опцию CSS, которая позволит мне навести курсор мыши на миниатюру изображения, чтобы заменить «большое» изображение. Хитрость здесь заключается в том, чтобы использовать ссылку-ссылку из ссылки на миниатюру в качестве источника большого изображения.
Приведенный ниже код работает только с javascript, но мне нужно сделать это с CSS и без javascript.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-1"> <img src="http://dummyimage.com/600x400/000/fff&text=1"> </div> <div id="thumbs" class="mouseover"> <a class="thumb-image-1" id="thumb_1" href="http://dummyimage.com/600x400/000/fff&text=1" title="1"><img src="http://dummyimage.com/60x40/000/fff&text=1" alt="image 1"/></a> <a class="thumb-image-1" id="thumb_2" href="http://dummyimage.com/600x400/000/fff&text=2" title="2"><img src="http://dummyimage.com/60x40/000/fff&text=2" alt="image 1"/></a> <a class="thumb-image-1"id="thumb_3" href="http://dummyimage.com/600x400/000/fff&text=3" title="3"><img src="http://dummyimage.com/60x40/000/fff&text=3" alt="image 1"/></a> </div> ... <div class="image-2"> <img src="http://dummyimage.com/600x400/f00/fff&text=2"> </div> <div id="thumbs" class="mouseover"> <a class="thumb-image-2" id="thumb_1" href="http://dummyimage.com/600x400/f00/fff&text=1" title="1"><img src="http://dummyimage.com/60x40/f00/fff&text=1" alt="image 1"/></a> <a class="thumb-image-2" id="thumb_2" href="http://dummyimage.com/600x400/f00/fff&text=2" title="2"><img src="http://dummyimage.com/60x40/f00/fff&text=2" alt="image 1"/></a> <a class="thumb-image-2" id="thumb_3" href="http://dummyimage.com/600x400/f00/fff&text=3" title="3"><img src="http://dummyimage.com/60x40/f00/fff&text=3" alt="image 1"/></a> </div> <script> $(function() { $(".mouseover a").mouseover(function(){ var src=$(this).attr('href'); var classs=$(this).attr('class'); classs=classs.substr(6); $('.'+classs).find('img').attr('src',src); }) }) </script>
Нужен твой добрый помощник
Вы можете использовать «transform: scale ()»
.mouseover img{ transition: transform 1s; } .mouseover img:hover { transform: scale(2); }
<html> <head></head> <body> <div id="thumbs" class="mouseover"> <a class="thumb-image-1" id="thumb_1" href="http://dummyimage.com/600x400/000/fff&text=1" title="1"><img src="http://dummyimage.com/60x40/000/fff&text=1" alt="image 1"/></a> <a class="thumb-image-1" id="thumb_2" href="http://dummyimage.com/600x400/000/fff&text=2" title="2"><img src="http://dummyimage.com/60x40/000/fff&text=2" alt="image 1"/></a> <a class="thumb-image-1"id="thumb_3" href="http://dummyimage.com/600x400/000/fff&text=3" title="3"><img src="http://dummyimage.com/60x40/000/fff&text=3" alt="image 1"/></a> </div> </body> <html>
Или, если вы хотите вместо этого изменить изображение для использования «scale ()», вы можете изменить структуру HTML следующим образом:
.mouseover .thumb-image:hover .small { display: none; } .mouseover .thumb-image:hover .big { display: inline-block !important; } .display-none { display: none; }
<html> <head></head> <body> <div id="thumbs" class="mouseover"> <a class="thumb-image thumb-image-1" id="thumb_1" title="1"> <img class="small" src="http://dummyimage.com/60x40/000/fff&text=1" alt="image 1"/> <img class="big display-none" src="http://dummyimage.com/600x400/000/fff&text=1" alt="image 1"/> </a> <a class="thumb-image thumb-image-1" id="thumb_2" title="2"> <img class="small" src="http://dummyimage.com/60x40/000/fff&text=2" alt="image 1"/> <img class="big display-none" src="http://dummyimage.com/600x400/000/fff&text=2" alt="image 1"/> </a> <a class="thumb-image thumb-image-1"id="thumb_3" title="3"> <img class="small" src="http://dummyimage.com/60x40/000/fff&text=3" alt="image 1"/> <img class="big display-none" src="http://dummyimage.com/600x400/000/fff&text=3" alt="image 1"/> </a> </div> </body> </html>