CODEWITHSUNDEEP
csshtmlhyperlinkhover
mmdwc
mmdwc

Reputation: 1137

Div and text changing together when hover

I have a problem with my stylesheet (or maybe I need to use some JavaScript).

I have a div including an image and a text link. Both the image and the text links to another page.
When hovering over the image, the image opacity changes and the text color changes. That's perfect.
When hovering the text, only the text color changes, but I would like also the opacity of the image to change.

I can't find what's wrong with my CSS, or my HTML...

Here is my CSS:

.artists_menu{
    width: 100%;
    margin-top: -120px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}

.bandeau{
    height:7px; 
    background-color: #eeeeee
}

.cartouche_crop{
    height: 240px;
    overflow: hidden;
    opacity:1;
    webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.cartouche_crop:hover{
    opacity:0.7;
    ilter: alpha(opacity=70);
}

h1{
    font-size: 36px;
    text-transform: uppercase;
    font-weight: normal;
    background-color: lightgrey;
}

h1 a:hover{
    color: magenta!important
}

a, a:active, a:visited {
    color: black;
    text-decoration: none;
    transition: 0.2s ease;
    -webkit-transition: color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in;
    -o-transition: color 0.2s ease-in;
    transition: color 0.2s ease-in;
}

a:hover {
    color: magenta
}

And my HTML:

<a href="http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/" title="amine edge &#038; dance">
    <div class="bandeau"></div>
    <div id="parent-57" class="parent-page">
        <div class="cartouche_crop">
            <img src="http://www.amsbooking.fr/mattieumoreau/wp-content/uploads/amine_11.jpg" class="artists_menu">
        </div>
        <div class="bandeau"></div>
            <h1>amine edge &#038; dance</h1>                
        <div class="bandeau"></div>
    </div>
</a>

Here is a jsFiddle link so you can see it live: http://jsfiddle.net/FkWxb/1/

Can anybody help me with this?

Upvotes: 0

Views: 290

Answers (3)

BENARD Patrick
BENARD Patrick

Reputation: 30975

fiddle : http://jsfiddle.net/FkWxb/3/

replace :

.cartouche_crop:hover{opacity:0.7;filter: alpha(opacity=70);}

by

a:hover .cartouche_crop{opacity:0.7;filter: alpha(opacity=70);}

and remove

h1 a:hover{color: magenta!important}

Upvotes: 1

Jacob Wood
Jacob Wood

Reputation: 199

You can try enclosing both the text and the image in a div and applying the hover effect to the div.

I've wrapped the code in a div

<div id="fancy_hover">
<div class="cartouche_crop">
    <img src="http://www.amsbooking.fr/mattieumoreau/wp-content/uploads/amine_11.jpg" class="artists_menu">
</div>

and referenced it in the css

#fancy_hover:hover{opacity:0.7;filter: alpha(opacity=70);}

http://jsfiddle.net/cqVz4/

Upvotes: 1

Tutcugil
Tutcugil

Reputation: 358

You can add this line into your css code .parent-page:hover{opacity:0.7;filter: alpha(opacity=70);}

http://jsfiddle.net/XKe8L/

Upvotes: 1

Related Questions