Question

我有一个小的jquery，当元素悬停时显示一些隐藏的内容。目前它显示了匹配的每个el，但我希望该行为仅影响正在悬停的元素。我想我需要以某种方式添加关键字，让dom知道它应该只显示正在悬停的元素。

 <li class="col-md-12">
  <div class="col-md-2">
    <a class="cbp-vm-image" href="#">
        <img src="assets/images/stash/11.png">
    </a>
</div>

<div class="col-md-10">
    <h3 class="cbp-vm-title">Lorem ipsum dolor sit amet</h3>
    <h5>by <b> Carrie_Strohl </b> - 3 weeks ago - 30,000 views</h5>

    <div class="cbp-vm-details">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
    </div>
</div>

$( ".cbp-vm-image" ).hover(function() {
    var n = $(".cbp-vm-view-grid .col-md-10");
    n.fadeToggle( 500 );
});

Answer 1

如果您要显示的元素是正在悬停的元素的子元素，您应该能够使用jquery .find()方法来实现此目的：

$( ".cbp-vm-image" ).hover(function() {
$(this).find(".cbp-vm-view-grid .col-md-10").fadeToggle( 500 );

}）;

Answer 2

您可以在函数中使用event参数来查找正在悬停的元素。

$( ".cbp-vm-image" ).hover(function(event) {
    var $hoveredElement = $(event.target);
    $hoveredElement.fadeToggle( 500 );
});

或者，this会给你同样的东西：

$( ".cbp-vm-image" ).hover(function() {
    var $hoveredElement = $(this);
    $hoveredElement.fadeToggle( 500 );
});

Answer 3

使用html“data”属性的方法略有不同。

FIDDLE

JS

$( ".myhover" ).hover(
    function(){
               var mytext = $(this).data("text");
               $('.putmehere').html( mytext );
               },
    function(){
               $('.putmehere').html('');
               }
);

添加（this）关键字以单独输出元素

3 个答案: