3

我正在使用 jQuery 悬停效果。我计划从现在的状态扩展它，但我遇到了问题。问题是我想隐藏一些文本，直到您将鼠标悬停在该 div 上，然后它将显示它。那么一旦你移动到不同的 div 它会再次隐藏它？

这就是我到目前为止所拥有的。http://jsfiddle.net/UDFw7/

CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

javascript

$('.divname').hover(function() {
$(this).animate({
    height: '40px'
}, 300);
},function() {
$(this).animate({
    height: '20px'
}, 300);
});

HTML

<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> Hidden text until hover over</div>
<div class='divname'>Text Here</div>
4

4 回答 4

6

添加overflow: hidden;到.divname

于 2013-03-15T11:20:08.567 回答
0

CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

.divname span {
    display: hidden;
 }

javascript

$('.divname').hover(function() {
    $(this).animate({
        height: '40px'
    }, 300);
    $('span', this).css("display", "block");
},function() {
    $(this).animate({
        height: '20px'
    }, 300);
    $('span', this).css("display", "none");
});

HTML

<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> <span> Hidden text until hover over<spa></div>
<div class='divname'>Text Here</div>

演示：http: //jsfiddle.net/UDFw7/14/

于 2013-03-15T11:20:44.940 回答
0

您需要一个新的隐藏文本 CSS 类，例如：

.divname p.hidden {
    display:none;
}

然后，当您将鼠标悬停在该类上时，您想要显示该文本，因此您需要在 javascript 中使用它：

 $(this).children().show();

这将更改显示属性以显示隐藏的文本。

我做了一个快速的小提琴，它并不完美，但它是一个开始：http: //jsfiddle.net/UDFw7/3/

您需要在其中添加一些内容，以便在您将鼠标悬停时“重新隐藏”该元素。

于 2013-03-15T11:23:44.640 回答
0

如下更改 CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
overflow-y: hidden;

}

于 2013-03-15T11:24:25.763 回答