Question

我正在使用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>

Answer 1

将overflow: hidden;添加到.divname

Answer 2

<强> 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/

Answer 3

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

.divname p.hidden {
    display:none;
}

然后当您将鼠标悬停在该课程上时，您希望显示该文字，因此您需要在javascript中使用此内容：

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

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

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

你需要添加一些内容，以便在悬停时“重新隐藏”该元素。

Answer 4

如下所示更改CSS

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

}

jQuery悬停动画不会隐藏文本

4 个答案: