去除懸停外部div上的內部元素類

我想知道如何懸停一些div，並且只在我懸停的div中移除段落標記的模糊效果。除了爲div和段落使用id之外，是否還有其他方法，因爲我有類似100 div的東西。去除懸停外部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>

預先感謝您。

來源

2017-10-07 jonkata1985

只是使用僞類: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>

來源

2017-10-07 10:07:50

偉大的，但如果我有另一格，而不是段落標記？這就是爲什麼我想這需要一些jQuery或JS。 – jonkata1985

@ jonkata1985然後使用選擇器'div：hover div'或添加一些class'div：hover .someclass'。 –

試試這個

<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>

來源

2017-10-07 10:08:03

開始您的觀點 - 爲段落添加「模糊」類，但完全沒有發生任何事情。也許我做錯了什麼？ – jonkata1985

抱歉，延遲迴復。我只是修改它，你也可以用css來實現。 –

我覺得這是你所需要的：

使用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; 
}

來源

2017-10-07 10:23:37

去除懸停外部div上的內部元素類

回答

相關問題