访问鼠标指向的所选类

Question

我想访问特定的类并在鼠标悬停在特定的类上时应用以下代码。我为4个不同的div使用相同的类名。我该怎么办？

steady_clock

<div class="block"><span class="gradient"> <span class="block-show">Tech Blogs</span> </span></div>
<div class="block"><span class="gradient"> <span class="block-show">Tech Blogs</span> </span></div>
<div class="block"><span class="gradient"> <span class="block-show">Tech Blogs</span> </span></div>
<div class="block"><span class="gradient"> <span class="block-show">Tech Blogs</span> </span></div>

Answer 1

使用on方法和mouseover事件，如下所示：

$('element').on("mouseover", function(){
  console.log($(this).attr('class'))
})

Answer 2

您可以在函数中使用事件

obj.mouseenter(function(event){
$(event.currentTarget).animate({
    height: "8em"
});

Answer 3

您可以使用$(this)来引用您单击的元素。

HTML

<button type="button" class="xyz" name="button">A</button>
<button type="button" class="xyz" name="button">B</button>

jQuery

$('.xyz').hover(function() {
    // here you can do what you want to do when the mouse enters
    $(this).css("background-color","yellow");
}, function() {
    // here you can do what you want to do when the mouse leaves
    $(this).css("background-color","red");
});