3
У меня есть контейнер div с идентификатором #homeSectionB, внутри него есть статьи, все из которых имеют класс .testimonial.Наведите указатель мыши на div и примените CSS к пыльцу
Что я пытаюсь сделать, так это то, что когда вы наводите указатель на один из свидетельств, все остальные получают непрозрачность 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);
}
заведите [скрипку] (http://jsfiddle.net) со всем вашим кодом, чтобы получить быстрый ответ. – Chandranshu
Ops извините, вот один приятель: http://jsfiddle.net/svZ3C/ –
Просто не связанный хедз-ап, кнопки портфолио представления приводят к ошибке 404. – Doge