悬停时在 div 上显示一个框答案

【问题标题】：Show a box on div on hovering悬停时在 div 上显示一个框
【发布时间】：2014-05-04 03:08:46
【问题描述】：

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

【问题讨论】：

有很多答案。
搜索，搜索，搜索！！！

标签： javascript jquery html css

【解决方案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;
 }

我认为这应该可行:)

【讨论】：

你可能需要这样做

TEXT HERE

【解决方案2】：

首先，您声明一个 div 以便它跟随您的鼠标指针。然后你可以在图像上方显示 div。当鼠标离开图像时，div 被隐藏。请检查示例小提琴

http://jsfiddle.net/B5h6v/

您可以使用 jQuery mouseenter() 和 mouseleave() 事件来实现它

【讨论】：