在悬停外部div上删除内部元素的类

Question

我想知道如何悬停div并仅在我悬停的div中消除段落标签的模糊效果。 除了使用id和div以外，还有其他方法吗，因为我有100 div之类的东西。

这是示例代码：

 $( "div" ).hover(function() { $( "p" ).toggleClass( "clear" ); }); 

  div { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; text-align: center; } .blue { color: blue; } .clear { background: yellow; -webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */ filter: blur(0px); -webkit-transition: ease-in 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-in 0.25s; -webkit-transition: ease-out 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-out 0.25s; cursor: pointer; } .diva { background: yellow } p { -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */ filter: blur(1px); -webkit-transition: ease-in 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-in 0.25s; -webkit-transition: ease-out 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-out 0.25s; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> 

先感谢您。

Answer 1

只需使用伪类:hover 。 尝试：

 div { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; text-align: center; } .blue { color: blue; } div:hover p{ background: yellow; -webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */ filter: blur(0px); -webkit-transition: ease-in 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-in 0.25s; -webkit-transition: ease-out 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-out 0.25s; cursor: pointer; } .diva { background: yellow } p { -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */ filter: blur(1px); -webkit-transition: ease-in 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-in 0.25s; -webkit-transition: ease-out 0.25s; /* For Safari 3.1 to 6.0 */ transition: ease-out 0.25s; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> <div class="blue"><p>paragraphs</p></div> 

Answer 2

尝试这个

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="blue"><p>A man </p></div> <div class="blue"><p>A man </p></div> <div class="blue"><p>A man </p></div> <div class="blue"><p>A man </p></div> <div class="blue"><p>A man </p></div> <script> $( ".blue" ).hover(function() { $(this).find('p').css('filter', 'blur(1px)'); }, function(){ $(this).find('p').css('filter',''); } ); </script> 

Answer 3

我认为这是您需要的：

使用jQuery：

$(function() {
    $("div").on('mouseenter',function() {
        $("div").not(this).find("p").removeClass("clear");
        $(this).find("p").addClass("clear");
    });
});

或使用CSS：

div:hover p {
    filter: blur(0px) !important;
}