本文介绍了选择除一个元素外的所有主体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图选择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>手袋< / h4>
< img src =FullSizeRender（1）.jpg/>
< / div>
< div class =col-md-2>
< h4>沙滩包< / h4>
< img src =FullSizeRender（2）.jpg/>
< / div>
< div class =col-md-2>
< h4>钱包< / h4>
< img src =IMG_5213.JPG/>
< / div>
< div class =col-md-2>
< h4>瓶运送器< / h4>
< img src =FullSizeRender（5）.jpg/>
< / div>
< div class =col-md-2>
< h4>篮子< / h4>
< img src =img1.jpg/>
< / div>
< / div>
< div class =row>
< div class =col-md-2>
< h4>花瓶< / 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>杯垫< / h4>
< img src =IMG_4665.JPG/>
< / div>
< div class =col-md-2>
< div class =tiss>
< h4>纸巾盒盖< / h4>
< img src =img3.jpg/>
< / div>
< / div>
< div class =col-md-2>
< div class =ornament>
< h4>假日饰品< / h4>
< img src =img4.jpg/>
< / div>
< / div>
< / div>
< / div>
解决方案
请尝试以下操作，使用CSS处理悬停设置新的高度，当没有徘徊的时候，高度会回到你之前所做的任何事情。
还有悬停和回调（不是徘徊），你可以将其他设置为<$ c $当鼠标移出时（ opacity：1） $ b> c> opacity：0.4$ b
div {width：50px; height：50px;显示：inline-block;背景：green;}。heigher {height：100px;}。content：hover {height：200px; -webkit-transition：高度1s线性; -moz-transition：高度1s线性; -ms-transition：高度1s线性; -o-transition：高度1s线性;过渡：身高1s线性; } < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div class =content>内容1< / div>< div class =内容>内容2< / div>< div class =content>内容3< / div>< div class =content heigher>内容4< / div>< div class = > content 5< / div>< div class =content heigher> content 6< / div>
p>
更新版本：
$（。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.cssrel =stylesheet/><脚本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>手袋及LT; / H4> < img src =FullSizeRender（1）.jpg/> < / DIV> < div class =col-md-2> < h4>沙滩包< / h4> < img src =FullSizeRender（2）.jpg/> < / DIV> < div class =col-md-2> < H4>钱包和LT; / H4> < img src =IMG_5213.JPG/> < / DIV> < div class =col-md-2> < h4>瓶架< / h4> < img src =FullSizeRender（5）.jpg/> < / DIV> < div class =col-md-2> < H4>篮< / H4> < img src =img1.jpg/> < / DIV> < / DIV> < div class =row> < div class =col-md-2> < H4>花瓶和LT; / H4> < img src =img2.jpg/> < / DIV> < div class =col-md-2> < H4>餐垫< / H4> < img src =img6.jpg/> < / DIV> < div class =col-md-2> < H4>杯垫< / H4> < img src =IMG_4665.JPG/> < / DIV> < div class =col-md-2> < div class =tiss> < h4>纸巾盒盖< / h4> < img src =img3.jpg/> < / DIV> < / DIV> < div class =col-md-2> < div class =ornament> < h4>节日饰品< / h4> < img src =img4.jpg/> < / DIV> < / DIV> < / div>< / div>
I'm trying to select all the body's elements in jQuery except "this", or the one being hovered on. I'm trying to get the body to go to a certain opacity, but "this" to maintain its opacity. This is my code:
$(".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>
解决方案
Try the following, use CSS to handle hover set new height, when not hovered the height will back to whatever you have before.
Also with hover and callback(not hovered), you can set all other to opacity: "0.4" on hover, and reset all when mouse move out (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>
UPDATED Version:
$(".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>这篇关于选择除一个元素外的所有主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！