在懸停外部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;
}