CODEWITHSUNDEEP
htmlcss
user2162270
user2162270

Reputation:

Hover-over a div and applying CSS to anther

I have a div container with the ID of #homeSectionB, inside it there are articles all all of them have the class .testimonial.

What I am trying to do is that when you hover over one of the testimonial all of the other get an opacity of 0.60. I got it working view it live here: http://www.loaistudio.com/client-preview/Loai%20Design%20Studio

However, I am having a a problem, when you hover over the container all of the testimonials get that opacity class. How can I fix it? and make it only when you are actually hovering over one of the testimonials and not the container

And here is a fiddle: 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 &amp; strap yourself in as this young designer &amp; associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, &amp; 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 &amp; Business Consultant</p>
                                    <br>
                                <p>"Leo did a great job! He designed &amp; put together several websites for me in less than a week. He was incredibly patient &amp; flexible throughout the whole process, &amp; 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);
    }

Upvotes: 3

Views: 201

Answers (2)

Chandranshu
Chandranshu

Reputation: 3669

Your problem styles are these:

#homeSectionB:hover .testimonial {
    opacity: 0.60;
    -moz-opacity: 0.60;
    -khtml-opacity: 0.60;
    filter: alpha(opacity=60);
}

You've clearly specified that all testimonials should get an opacity of 0.60 when someone hovers on the div#homeSectionB. Now, I understand that you have done this because you wanted to fade out other testimonials when someone hovered over one of them. This would have worked if you didn't have any gutter width.

There are multiple ways to resolve this issue now. Let me know if you are okay with a JS approach or want a CSS-only one.

UPDATE 1:

Here you go: http://jsfiddle.net/svZ3C/5/ . The principle involved here is that you need to use padding in place of margin. Here are the updated CSS rules:

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

and slight change in the HTML is this:

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

Upvotes: 2

Richard Peck
Richard Peck

Reputation: 76784

We have this setup working (check out the nav bar on http://firststop.herokuapp.com), and I know the problem you want to fix is to have the opacity only work if you hover over one of the elements (not the container)

Although I don't have a direct solution, I have a way which works well enough for your users to not notice anything

CSS Child & Sibling Selectors

We spent a long time looking over the mechanics of CSS child & sibling selectors, trying to get them to work to achieve your desired result. The issue is that you cannot select siblings on hover; you can only select children:

.container:hover .children{
    /* Works */
}

.child:hover .other_children {
    /* Not Works */
}

Might be wrong, but that's the problem you have -- that you have to style from the container - down

Use Padding

So our fix was to replace margin with padding, meaning that if you went into the container with your mouse, you had to hover over one of the elements

We took our elements & created a mini-container for them. This was display:inline-block, and had padding: Xpx

I updated your jsFiddle to show these fixes:

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>

Upvotes: 2

Related Questions