悬停显示内容

Question

我有四个相同宽度和高度的浮动div。

在每个div之间有一个隐藏的内容div，它与浮动的div相关。

当我将鼠标悬停在任何浮动的div上时，相应的div内容都会显示出来，当鼠标移出时，它会回到原来的位置。

我如何使用jquery来实现这一点？

请点击下面的链接查看代码示例http://jsfiddle.net/NbVfD/22/

Answer 1

使用以下内容：

$('.box').hover(
    function(){
        $(this).next('.boxTxt').show();
    },
    function(){
        $(this).next('.boxTxt').hide();
    });​

JS Fiddle demo。

更新以上代码以包含fadeIn()/fadeOut()动画：

$('.box').hover(
    function(){
        $(this).next('.boxTxt').stop().fadeIn(900);
    },
    function(){
        $(this).next('.boxTxt').stop().fadeOut(900);
    });​

JS Fiddle demo。

并修改您的HTML，以便您使用class而不是id来标识您的元素，如下所示：

id =名称CS

此属性为元素指定名称。此名称在文档中必须是唯一的。class =cdata列表CS

此属性将一个或一组类名分配给元素。可以为任意数量的元素指定相同的一个或多个类名。多个类名必须用空格字符分隔。

(引用自：http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)。

当然，您也可以使用简单的CSS实现相同的效果：

.box:hover + .boxTxt,
.boxTxt:hover {
    display: block; /* to show the element */
    width: 10em; /* aesthetics, adjust to taste... */
    height: 20em;
    background-color: #ffa;
    overflow: hidden; 
    overflow-y: scroll;
    margin-left: -10px;
}​

JS Fiddle demo。

更新了上面的内容，以允许CSS转换(如果可用)以动画显示/取消显示元素(为此，我还对HTML进行了一些更改)：

#boxCon {width:100%}
.boxTxt{
    position: absolute;
    top: 1em; /* in order that there was a target area on the next .boxWrap to
                 to provide a :hover target area to mouse-over to trigger the
                 next .boxTxt to reveal */
    left: 100%;
    opacity: 0;
    z-index: 10;
    overflow: hidden;
    height: 0;
    width: 0;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;}

.box{width:50px; height:50px; background-color:#000; 
}

.boxWrap:hover .boxTxt{
    opacity: 1;
    display: block;
    width: 10em;
    height: 20em;
    background-color: #ffa;
    overflow: hidden;
    overflow-y: scroll;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

div.boxWrap {
    float: left; /* as originally assigned to .box elements */
    padding: 20px 5px; /* equal to the margins originally placed on the .box elements */
    position: relative; /* to allow for absolute positioning of the .boxTxt elements */
}

JS Fiddle demo。

参考文献：

• fadeIn().
• fadeOut().
• hide().
• hover().
• next().
• show().
• stop().

Answer 2

使用mouseenter() & mouseleave函数来实现这一点。

<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
      $("p:last",this).text(++i);
    });

    var n = 0;
    $("div.enterleave").mouseenter(function(){
      $("p:first",this).text("mouse enter");
    }).mouseleave(function(){
      $("p:first",this).text("mouse leave");
      $("p:last",this).text(++n);
    });

</script>

</body>
</html>

参考网址：http://api.jquery.com/mouseenter/

(如果您认为答案正确，请标记为答案。)

Answer 3

请参阅工作示例：

http://jsfiddle.net/rathoreahsan/4HvH3/

HTML

<div id="boxCon">

    <div class="box" data-img="boxTxt1"></div>
    <div id="boxTxt1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

    <div class="box" data-img="boxTxt2"></div>
    <div id="boxTxt2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</div>

JQUERY:

$("#boxCon").on("mouseover mouseout", "div.box", function () {
    $("#" + $(this).data("img")).toggle();
});