Question

我想知道我怎么能只悬停一些div并删除段落标记的模糊效果只在我悬停的div中。有没有其他方式除了使用id为div和段落，因为我有100个div这样的东西。

这是示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

提前谢谢。

Answer 1

只使用伪类:hover。尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个

＆＃13;

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

＆＃13;

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

在悬停的外部div

3 个答案: