Question

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

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

当我将鼠标悬停在任何浮动的div上时，相应的div 将显示内容，并且在mouseout上它将返回其原始位置。

我如何使用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-list [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

参考文献：

Answer 2

使用mouseenter（）＆amp; 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();
});

在悬停时显示内容

3 个答案: