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

时间:2014-05-03 18:29:48

标签: javascript jquery html css

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

2 个答案:

答案 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被隐藏。请查看示例小提琴

http://jsfiddle.net/B5h6v/

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

来实现它