Блог

У меня есть небольшой jquery, который показывает некоторое скрытое содержимое при наведении курсора мыши на элемент. В настоящее время он показывает каждый сопоставленный el, но я бы хотел, чтобы поведение влияло только на элемент, на который наведен указатель мыши. Я думаю, мне нужно каким-то образом добавить ключевое слово this, чтобы сообщить 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 );
});
  

Просто немного другой подход с использованием атрибута html «data».

СКРИПКА

JS

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

Если элемент, который вы хотите отобразить, является дочерним элементом элемента, на который наведен указатель мыши, вы должны иметь возможность использовать метод jquery .find() для достижения этой цели:

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

});

Вы можете использовать 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 );
});