jquery - 将鼠标悬停在父 div 上时切换跨度文本

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

尝试这个：

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

在这里演示

Answer 2

你可以试试

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

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

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

Answer 3

您可以使用toggleClass：

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