ホバリングの外側のdivの内側の要素のクラスを削除します

Question

divをホバリングして段落タグのぼかし効果を削除するにはどうすればいいですか？ divや段落のidを使う以外は他の方法がありますか？100 divのようなものがあります。

これはサンプルコードです：

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

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

をお試しください：jQuerを使用して

Y：

$(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; 
}