所以我正在研究将显示文本 div 的图像的鼠标悬停效果。我已经设置好 css,但我在使用 Jquery 时遇到了问题。我在 wordpress 主题中使用这个内联,我想知道这是否是我的问题。
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.25)
.end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1)
.end().children(".hover").hide();
});
</script>
<div class="imgHover">
<div class="hover">Test Content for the hover</div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
</div>
谁能帮帮我?
最佳答案
将您的代码包装在 $(document).ready
中:
$(document).ready(function() {
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.25).end()
.children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1).end()
.children(".hover").hide();
});
});
或使用 event delegation :
$(document).on("mouseover",".imgHover",function() {
$(this).children("img").fadeTo(200, 0.25).end()
.children(".hover").show();
}).on("mouseleave",".imgHover", function() {
$(this).children("img").fadeTo(200, 1).end()
.children(".hover").hide();
});
关于jquery - 在 img 鼠标悬停时显示 div(jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14942907/