我有一个ID为#homeSectionB的div容器，里面有文章，所有这些都有类.testimonial。
我想要做的是，当你将鼠标悬停在其中一个推荐书上时，所有其他人都会得到0.60的不透明度。我得到了它的工作视图它住在这里：http://www.loaistudio.com/client-preview/Loai%20Design%20Studio
但是，我遇到了一个问题，当您将鼠标悬停在容器上时，所有推荐都会获得该不透明度类。我该如何解决？只有当你实际上将鼠标悬停在其中一个推荐书上而不是容器上时才能制作
这是一个小提琴：http://jsfiddle.net/svZ3C/
HTML：
<article class="testimonial">
<img alt="Neal Kilburne" src="assets/elements/neal-kilburne.jpg"/>
<section>
<h3>Neal Kilburne</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses, such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</section>
</article>
<article class="testimonial">
<img alt="Vanessa Elharrar M.D" src="assets/elements/vanessa-elharrar.jpg"/>
<section>
<h3>Vanessa Elharrar M.D</h3>
<p>www.dreamcometruecoaching.com</p>
<br>
<p>"“It was wonderful to work with Loai on my website. He’s a really talented and gifted web designer, really creative and really has an eye for style and design. I loved the process of working with him, he’s a really nice guy and I do recommend him. I think you’ll love the outcome. I was very impressed and would use him again in a heartbeat.”" November 25, 2012</p>
</section>
</article>
<article class="testimonial">
<img alt="Glen Eric Huysamer" src="assets/elements/glen-eric-huysamer.jpg"/>
<section>
<h3>Glen Eric Huysamer</h3>
<p>Specialist Service Provider.</p>
<br>
<p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up & strap yourself in as this young designer & associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, & can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
</section>
</article>
</div><div id="grid2"><!-----Gird 2----->
<article class="testimonial">
<img alt="Geeta Martinez" src="assets/elements/geeta-martinez.jpg"/>
<section>
<h3 >Geeta Martinez</h3>
<p>Lawyer & Business Consultant</p>
<br>
<p>"Leo did a great job! He designed & put together several websites for me in less than a week. He was incredibly patient & flexible throughout the whole process, & took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
</section>
</article>
<article class="testimonial">
<img alt="Phil Turtle" src="assets/elements/phil-turtle.jpg"/>
<section>
<h3>Phil Turtle</h3>
<p>www.turtleconsulting.com</p>
<br>
<p>“When we needed a new logo for our business operation (Data Center Industry PR). We needed somebody to help to try to encapsulate what a Data Center is, into a very simple logo. As many people don not even know what a Data Center is that was not an easy challenge. But Loai Design stepped up and within two days we had several ideas from which to choose, we worked on the chosen one of those and very quickly indeed we had a full working logo and our ecommerce site up and running. Thank You Loai Design.” July 11, 2013</p>
</section>
</article>
<article class="testimonial">
<section>
<h3>Richard Jackson</h3>
<p>Photographer www.rjpstudios.co.uk</p>
<br>
<p>“Loai designed my website last year though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
</section>
</article>
</div><div id="grid3"><!-----Gird 3----->
<article class="testimonial">
<img alt="Lulu Oliver" src="assets/elements/lulu-oliver.jpg"/>
<section>
<h3>Lulu Oliver</h3>
<p>www.lusialpacas.co.uk</p>
<br>
<p>"He is the most fantastic young man, he is talented, clever and extremely helpful. He Put my whole package together, he designed the website well. and now I have a website that I can mange my self and it just have everything I wanted to do. So I can't recommend him highly enough, he really is a really good guy, and if you want some help or you want him to do your website, that is the place to go!” Mar 26, 2013</p>
</section>
</article>
<article class="testimonial">
<img alt="Alina Kouneva Tremblay" src="assets/elements/alina-kouneva-tremblay.jpg"/>
<section>
<h3>Alina Kouneva Tremblay</h3>
<p>www.alinagardens.com</p>
<br>
<p>"I had the honor and the privilege to work with Loai on my website. I have been looking for a web designer, who can simply just do what I wanted and put it in a website so that my customers had access to my work. He was wonderful to work with, as much he's a professional, he's also just a great guy and very easy to work with. I remember laughing lot with him and it's always a nice thing to do, becouse websites can be a bit stressfull. I love my website, my friends love my website, my business associate love my website, and I simply want everybody to love their websites as much as I do. So I highly recommend Loai for your next website!” April 5, 2013</p>
</section>
</article>
</div>
</div>
</div>
CSS：
/*HOME PAGE -> Section E*/
.testimonial {
background-color: #F7F7F7;
border: 1px solid #149B78;
margin-bottom: 20px;
text-align: center;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.testimonial section {
padding: 20px;
}
.testimonial section h3 {
color: #1AC99C;
}
.testimonial section p {
font-size: 0.90em;
}
.testimonial section p:first-of-type {
color: #149B78;
}
.testimonial img {
border-bottom: 1px dashed #435D84;
padding: 1px;
}
/*The hover-over animation*/
#homeSectionB:hover .testimonial {
opacity: 0.60;
-moz-opacity: 0.60;
-khtml-opacity: 0.60;
filter:alpha(opacity=60);
}
#homeSectionB:hover .testimonial:hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
-moz-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
}
答案 0 :(得分：2)
您的问题风格如下：
#homeSectionB:hover .testimonial {
opacity: 0.60;
-moz-opacity: 0.60;
-khtml-opacity: 0.60;
filter: alpha(opacity=60);
}
你已经明确指出当有人在div＃homeSectionB上盘旋时，所有推荐都应该得到0.60的不透明度。现在，我知道你已经这样做了，因为当有人在其中一个人身上盘旋时，你想要淡出其他的推荐书。如果您没有任何装订线宽度，这将有效。
现在有多种方法可以解决此问题。如果你对JS方法没问题，或者想要一个只有CSS的方法，请告诉我。
更新1 ：
在这里：http://jsfiddle.net/svZ3C/5/。这里涉及的原则是你需要使用填充代替边距。以下是更新的CSS规则：
article {
padding-bottom: 20px;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
#grid1 article {
padding-right: 15px;
}
#grid2 article {
padding: 0 5px 20px 5px;
}
#grid3 article {
padding-left: 15px;
}
/*Don't modify articles. Modify testimonials within them.*/
#homeSectionB:hover .testimonial {
opacity: 0.10;
-moz-opacity: 0.10;
-khtml-opacity: 0.10;
filter:alpha(opacity=10);
}
#homeSectionB:hover .testimonial:hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 20px 0px rgba(14, 109, 85, 0.3);
-moz-box-shadow: 0px 0px 20px 0px rgba(14, 109, 85, 0.3);
box-shadow: 0px 0px 20px 0px rgba(14, 109, 85, 0.3);
}
HTML中的细微变化是这样的：
<article>
<div class="testimonial" <img alt="Neal Kilburne" src="assets/elements/neal-kilburne.jpg" />
<section>
<h3>Neal Kilburne</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses, such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</section>
</div>
</article>
答案 1 :(得分：2)
我们有这个设置工作（查看http://firststop.herokuapp.com上的导航栏），我知道你要修复的问题是只有将鼠标悬停在其中一个元素（不是容器）上时，不透明度才有效）
虽然我没有直接解决方案，但我有一种方法可以让您的用户不会注意到任何内容
CSS Child＆amp;兄弟选择器
我们花了很长时间来研究CSS child & sibling selectors的机制，试图让他们努力达到你想要的结果。问题是你不能在悬停时选择兄弟姐妹;你只能选择孩子：
.container:hover .children{
/* Works */
}
.child:hover .other_children {
/* Not Works */
}
可能是错的，但这就是你遇到的问题 - 你必须从container - down
使用填充
所以我们的解决方法是将margin替换为padding，这意味着如果您使用鼠标进入容器，则 将鼠标悬停在其中一个元素上< / p>
我们采取了我们的元素＆amp;为他们创造了一个迷你容器。这是display:inline-block，并且padding: Xpx
I updated your jsFiddle显示以下修复内容：
article {
padding-bottom: 20px;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
.testimonial {
background-color: #F7F7F7;
border: 1px solid #149B78;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
/*The hover-over animation*/
#homeSectionB:hover article {
opacity: 0.10;
-moz-opacity: 0.10;
-khtml-opacity: 0.10;
filter:alpha(opacity=10);
}
#homeSectionB:hover article:hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
-moz-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
}
<article >
<div class="testimonial">
<img alt="Neal Kilburne" src="assets/elements/neal-kilburne.jpg"/>
<section>
<h3>Neal Kilburne</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses, such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</section>
</div>
</article>