我的代码中有一个div,其中插入了一个图像。我希望当我将鼠标悬停在该图像上时,应在图像上显示带有一些文字的方框.....
<div id=".image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSZPFUnMbNKcDHYgjgLqslZtOicCfxph__Jwk95NZGXM_HZ1wzvbGhlrSNi">
<div id="des">hi</div>
</div>
我希望制作一个盒子,当图像悬停在图像上时会出现一些文字。
我该怎么做?
我试过以下但没有工作
<script type="text/javascript">
$(document).ready(function(){
$(".image").mouseover(function() {
alert("hello");
$(this).children(".des").show();
}).mouseout(function() {
$(this).children(".des").hide();
});
});
</script>
答案 0 :(得分:1)
制作两个div,一个用于图像,另一个用于包含文本的框。
例如div1(图像)和div2(带文本的框)。
.div1 {
background:url('image.jpg');
}
.div2 {
width:20px;
height:20px;
background-color:#000;
}
到目前为止我?
所以在HTML中你会有......
<HTML>
<head>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
TEXT HERE
</div>
</body>
</HTML>
然后在将鼠标悬停在div1上时显示div2,您需要使div2不显示为默认值,并生成悬停命令。
.div1 {
background:url('image.jpg');
}
.div2 {
width:20px;
height:20px;
background-color:#000;
display:none;
}
.div1:hover + .div2 {
display:block;
}
我认为这应该有效:)
答案 1 :(得分:0)
首先,声明一个div,使其跟踪鼠标指针。然后,您可以在图像上方显示div。当鼠标离开图像时,div被隐藏。请查看示例小提琴
您可以使用jQuery mouseenter()
和mouseleave()
事件