我试图选择 jQuery 中除“this”或悬停的元素之外的所有主体元素。我试图让身体达到一定的不透明度，但“这个”是为了保持其不透明度。这是我的代码：
$(".content img").mouseenter(function() {
$(this).animate({
opacity: "1",
});
$("body").find('*').not($(this)).animate({
opacity: "0.4",
});
});
<div class="content">
<div class="row">
<div class="col-md-2">
<h4>Handbags</h4>
<img src="FullSizeRender (1).jpg" />
</div>
<div class="col-md-2">
<h4>Beach bags</h4>
<img src="FullSizeRender (2).jpg" />
</div>
<div class="col-md-2">
<h4>Purses</h4>
<img src="IMG_5213.JPG" />
</div>
<div class="col-md-2">
<h4>Bottle carriers</h4>
<img src="FullSizeRender (5).jpg" />
</div>
<div class="col-md-2">
<h4>Baskets</h4>
<img src="img1.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<h4>Vases</h4>
<img src="img2.jpg" />
</div>
<div class="col-md-2">
<h4>Placemats</h4>
<img src="img6.jpg" />
</div>
<div class="col-md-2">
<h4>Coasters</h4>
<img src="IMG_4665.JPG" />
</div>
<div class="col-md-2">
<div class="tiss">
<h4>Tissue box covers</h4>
<img src="img3.jpg" />
</div>
</div>
<div class="col-md-2">
<div class="ornament">
<h4>Holiday ornaments</h4>
<img src="img4.jpg" />
</div>
</div>
</div>
</div>
尝试以下操作，使用 CSS 处理悬停设置新的高度，当不悬停时，高度将恢复到之前的高度。
另外，通过悬停和回调（未悬停），您可以将所有其他设置为opacity: "0.4"悬停时，并在鼠标移出时重置所有内容（opacity: "1")
$(".content").hover(function() {
$(this).css("cursor", "pointer");
$("body").find("*").not(this).animate({
opacity: "0.4"
}, 1000);
}, function() {
$("body").find("*").stop().animate({
opacity: "1"
}, 0);
});
div {
width: 50px;
height: 50px;
display: inline-block;
background: green;
}
.heigher {
height: 100px;
}
.content:hover {
height: 200px;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-ms-transition: height 1s linear;
-o-transition: height 1s linear;
transition: height 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
<div class="content heigher">content 4</div>
<div class="content">content 5</div>
<div class="content heigher">content 6</div>
更新后的版本：
$(".content img").mouseenter(function() {
$(this).parent().animate({
opacity: "1",
});
$(".content").find('img').not($(this)).parent().animate({
opacity: "0.4",
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content">
<div class="row">
<div class="col-md-2">
<h4>Handbags</h4>
<img src="FullSizeRender (1).jpg" />
</div>
<div class="col-md-2">
<h4>Beach bags</h4>
<img src="FullSizeRender (2).jpg" />
</div>
<div class="col-md-2">
<h4>Purses</h4>
<img src="IMG_5213.JPG" />
</div>
<div class="col-md-2">
<h4>Bottle carriers</h4>
<img src="FullSizeRender (5).jpg" />
</div>
<div class="col-md-2">
<h4>Baskets</h4>
<img src="img1.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<h4>Vases</h4>
<img src="img2.jpg" />
</div>
<div class="col-md-2">
<h4>Placemats</h4>
<img src="img6.jpg" />
</div>
<div class="col-md-2">
<h4>Coasters</h4>
<img src="IMG_4665.JPG" />
</div>
<div class="col-md-2">
<div class="tiss">
<h4>Tissue box covers</h4>
<img src="img3.jpg" />
</div>
</div>
<div class="col-md-2">
<div class="ornament">
<h4>Holiday ornaments</h4>
<img src="img4.jpg" />
</div>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
