CSS3 Transition on Hyperlink Hover

Question

I have the following demo: http://jsfiddle.net/EHrk4/2/

Is it possible that #main remains opacity 1 until I hover over the hyperlink, then it goes to 0.3?

HTML:

<div id="main">    
    <a href="#">hover me to fade out main</a>
</div>

CSS:

#main {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    height:400px;
    width:400px;
    background:red
}

#main:not(:hover) {
    opacity: 0.3;
}

Many thanks for any pointers.

score 2 · Answer 1 · edited May 23 '17 at 12:04

No - your link is inside the element you want to affect, and currently there is no parent selector in CSS2 or in CSS3.

If your anchor was a sibling element of the div, you could affect the div's opacity as you wish - like in this quick jsFiddle example.

Example of affecting sibling in pure CSS:

HTML:

<a href="#">hover me to fade out main</a>
<div id="main">
</div>

CSS:

a:hover + #main {
    opacity:0.5;
}

If it has to be inside, I'd recomend using a Javascript library such as jQuery to achieve it.

Or, take a look at the the following answer, which explains a workaround for opacity affecting child elements.

Dylan Hayes · Accepted Answer · 2013-04-24T14:23:57.297

1

I would do it via jquery personally.

http://jsfiddle.net/EHrk4/5/

JQ

$('#link').hover(function(){
    $('#main').addClass('hover');
}, function(){
   $('#main').removeClass('hover');
})

CSS

#main {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    height:400px;
    width:400px;
    background:red
}

.hover {
    opacity: 0.3;
}

EDIT:

From our comments, here is how to do it while still preserving the child elements opacity of 1.

http://jsfiddle.net/EHrk4/11/

edited Apr 24 '13 at 14:23

answered Apr 24 '13 at 13:59

Dylan Hayes

2,331
1
23
33

Many thanks, Dylan!! This is aaaaalmost perfect. Just wondering, is it possible to keep the actual hyperlink unaffected by the opacity change? Thank you :) – michaelmcgurk Apr 24 '13 at 14:01
1

Yes instead of using opacity which effects all child elements, use rgba() on the background-color property. backround-color: rgba(255,0,0,.3) for your case. – Dylan Hayes Apr 24 '13 at 14:05
1

let me verify that quick i may have spoken too soon. – Dylan Hayes Apr 24 '13 at 14:07
1

I figured it out, its kind of hacky tho... make sure you provide color fallbacks for older browswers that dont support rgba. http://jsfiddle.net/EHrk4/9/ – Dylan Hayes Apr 24 '13 at 14:15
1

scratch that, this includes your transition, and cleans up a couple lines i had hanging around that were from when i was testing things. http://jsfiddle.net/EHrk4/11/ – Dylan Hayes Apr 24 '13 at 14:21
Many thanks, Dylan! Unfortunately, it doesn't seem to want to play ball with my local version :'( I'll look into it. – michaelmcgurk Apr 24 '13 at 14:26
Using `#link` caused some issues for me. Works great now - cheers!! – michaelmcgurk Apr 24 '13 at 16:23

score 0 · Answer 3 · answered Apr 24 '13 at 13:55

0

Yes this is posible for example:

#main,a{
   display:block;
   height:100px;
   width:100px;
}

Make the height,width of the anchor tag same as #main. So when you hover the link it will give you the affect all over the #main. Other wise you can use jquery for this.

answered Apr 24 '13 at 13:55

Adi

320
3
9

Thank you for your prompt response. jQuery could be an option. Have you seen this done before using jQuery? It would be great to see an example :) Thanks – michaelmcgurk Apr 24 '13 at 13:56
I tried your solution here: http://jsfiddle.net/EHrk4/3/ but alas, it didn't work for me. – michaelmcgurk Apr 24 '13 at 13:56
Yes i done it my self as well that's why i am asking him to use jquery as a 2nd option. – Adi Apr 24 '13 at 13:58

CSS3 Transition on Hyperlink Hover

3 Answers3