1

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

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

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

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

请按照以下链接获取代码示例http://jsfiddle.net/NbVfD/22/

4

3 回答 3

2

使用以下内容：

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

JS 小提琴演示。

更新以上内容以包含fadeIn()/fadeOut()动画：

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

JS 小提琴演示。

并修改您的 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 小提琴演示。

更新了上面的内容以允许 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 小提琴演示。

参考：

于 2012-07-09T12:41:10.107 回答
0

使用 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/

（如果您认为正确，请标记为答案。）

于 2012-07-09T12:40:29.763 回答
0

请参阅工作示例：

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>

查询：

$("#boxCon").on("mouseover mouseout", "div.box", function () {
    $("#" + $(this).data("img")).toggle();
});
于 2012-07-09T12:43:37.747 回答