去除悬停外部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上的内部元素类

回答

相关问题