Question

我的代码中有一个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>

Answer 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;
 }

我认为这应该有效：）

Answer 2

首先，声明一个div，使其跟踪鼠标指针。然后，您可以在图像上方显示div。当鼠标离开图像时，div被隐藏。请查看示例小提琴

http://jsfiddle.net/B5h6v/

您可以使用jQuery mouseenter()和mouseleave()事件

来实现它

在鼠标悬停时显示一个方框

2 个答案: