Question

我正在尝试在鼠标悬停在它上方时切换div的跨区文本。我希望这个函数能够处理多个div，每个div都有自己的文本，所以我为每个div创建了一个ID，但是它们共享了类.square。我尝试了多种变体，包括$('span",this).toggle和$(this).children().toggle();，但似乎没有任何效果。我确信在将示例翻译成我自己的代码时，我已经错过了一些小事，但在我的生活中无法弄清楚是什么。谢谢你的帮助。

目前我的代码如下：

HTML

<div id="B1" class="square">
    <span class="details">This is square 1</span>
</div>
<div id="B2" class="square">
    <span class="details">This is square 2</span>
</div>

CSS

  .square{
height:100px;
width:100px;
background-color:#0AA0AB;
color:#FFFFFF;
cursor:pointer;
text-align:center;
margin-left:10px;
display:inline-block;
}

的jQuery

    $('.square').hover(function() {
    $(this).children().toggle();
});

Answer 1

你可以尝试

$('span',$(this)).toggle(); // Note the $() around the this

但也许CSS就足够了（如果我能正确理解问题:)）：

.square > span {display:none;}
.square:hover > span {display:inline;}

Answer 2

试试这个：

$('.square').hover(function () {
    $(this).children('.details').toggle();
}, function () {
    $(this).children('.details').toggle();
});

DEMO HERE

Answer 3

您可以使用toggleClass：

$('.square').hover(function() {
    $(this).children().toggleClass('square');
});

在父div上悬停时切换跨度文本

3 个答案: