我的 js/jquery 知识有限,我很难弄清楚为什么我无法在实时网站上进行以下设置;第二张图片不会在那里切换。
它确实适用于小提琴:https ://jsfiddle.net/05vkw2mj/2/
#HTML
<div id="rodrigo">
RODRIGO
<img src="https://ywamsantiago.com/wp-content/uploads/2020/04/MG_1218-Rodrigo-Oliveira-copy-web-ready-500x500.jpg" id="rodrigo-img"/></div>
<div id="bob">
BOB
<img src="https://ywamsantiago.com/wp-content/uploads/2020/04/MG_1218-Rodrigo-Oliveira-copy-web-ready-500x500.jpg" id="bob-img"/></div>
#JQUERY
$(document).ready(function() {
$("#rodrigo").hover(function() {
$("#rodrigo-img").toggle();
});
$("#bob").hover(function() {
$("#bob-img").toggle();
})
});
#CSS
body {
padding-top:400px;
}
#rodrigo {
position: relative;
}
#rodrigo-img {
display: none;
position: absolute;
bottom: 25px;
left:0;
width: 350px;
max-width: 100%;
}
#bob {
position: relative;
}
#bob-img {
display: none;
position: absolute;
bottom: 25px;
left:0;
width: 350px;
max-width: 100%;
}
我认为这可能更容易理解。
$(document).ready(function() {
$(".links").hover(function(e) {
$($(e.target).data().img).toggle();
});
});
.img-container {
position: relative;
width: 150px;
height: 150px;
overflow: hidden;
}
.img-container img {
position: absolute;
display: none;
}
.links {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
<img src="https://picsum.photos/id/1020/300" id="rodrigo-img" />
<img src="https://picsum.photos/id/1/300" id="bob-img" />
</div>
<div id="rodrigo" class="links" data-img="#rodrigo-img">
RODRIGO
</div>
<div id="bob" class="links" data-img="#bob-img">
BOB
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句