On :hover opacity 0.0 on other level in css

Question

I'm trying to make a double rollover link. When rolling over 'foto'; I'd like to make 'fotografie' appear and 'grafisch' disappear (same thing: when rolling over grafisch, 'foto' to disappear). I've found that it'd be easiest with opactiy, but I can't seem to figure out the code.

Any help highly appreciated.

HTML

<a class="fotografie" href="URL">
<div class="foto">foto</div>
<div class="fotografieh">fotografie</div>
</a><a class="grafischontwerp" href="URL2">
<div class="grafisch">grafisch</div>
<div class="grafischontwerph">grafisch ontwerp</div>
</a>

CSS

.masterplan .fotografie {color: #ff6666;}
.masterplan .fotografie .fotografieh { display: none; }
.masterplan .fotografie:hover .foto { display: none; }
.masterplan .fotografie:hover .fotografieh { display: inline;}
.masterplan .grafischontwerp {color: #33cccc; }
.masterplan .grafischontwerp .grafischontwerph { display: none; }
.masterplan .grafischontwerp:hover .grafisch { display: none; }
.masterplan .grafischontwerp:hover .grafischontwerph { display: inline;}

CSS can only target descendents or sibings that come later. You might be able to make "hover over the first one to hide the second one" work, but not the other way around. — Niet the Dark Absol, Oct 13 '13 at 15:07
Well yes, I did figure that out, but what I want is that it does work the other way around as well. :P — Michiel Stegen, Oct 13 '13 at 15:25
I would look in jQuery to change the classes on hover. Then you can display: none; etc — Adam 'Sacki' Sackfield, Oct 13 '13 at 15:25
Thanks for your comment, would you like to specify? I'm not at all familiar with Javascript... Thanks! — Michiel Stegen, Oct 13 '13 at 15:40
@MichielStegen you can use plain **CSS** to achieve this, [example](http://jsfiddle.net/vucko/z6sPn/). — Vucko, Oct 14 '13 at 21:07

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

Seeing no easy answer using just CSS, I'd like to suggest adding simple few lines of jQuery:

$(document).ready(function() {

    $(".foto").hover( function() { // Assign 'hover' action to all elements with 'foto' class
        $(".grafisch").toggle(); // 'toggle' display on 'hover' event trigger for all elements with 'grafisch' class
    });
    $(".grafisch").hover( function() {
        $(".foto").toggle();
    });
    /* insert other jQuery code, if any */
    ...
});

I hope that helps, IF you're using jQuery.

EDIT:

Michael, I suspected that you may not be familiar with JavaScript/jQuery. There are tons of examples and tutorials on the web you can easily find. Also, be sure to search StackOverflow as well.

If you expect to continue to work with html and css at all, I'd suggest learning at least the basic concept behind JavaScript and jQuery, which is one of the most widely used JavaScript framework/libraries.

To get you started, check out the following links:

Notice that I also added some comments to the code I wrote earlier. Let me know if you have any other questions on this topic.

Check out this demo --> DEMO

edited May 23 '17 at 11:57

Community

1
1

answered Oct 13 '13 at 15:31

BinaryCat

1,220
2
17
32

Hi Vivendi, thanks a bunch for your comment and edit! I've been playing around with it for two nights now, but what happens now is that the toggle function the div that needs to hide for as long as hover just blinks, instead of staying away until I mouseoff... – Michiel Stegen Oct 14 '13 at 18:59
@Michiel - I quickly slapped together a few lines of code. It is based on my interpretation of your question so I could be a bit off track but it should give you an idea. Link is http://jsfiddle.net/kkim1975/pp5EG/ – BinaryCat Oct 14 '13 at 20:56
Great work, [tag:Vivendi75]! I'm so glad about the responses! I'll try and explain what I want to achieve: on hover you show two boxes; what I'm looking for is the box you mousover, the content changes from 'foto' to 'fotografie', same with 'grafisch' to 'grafisch ontwerp'. [Here's](http://img823.imageshack.us/img823/4509/8itm.jpg) an image with the mouseOff; hover on foto and hover on grafisch respectively. Thanks again a bunch for all your help! – Michiel Stegen Oct 15 '13 at 09:24
(The black border respresents the browser) – Michiel Stegen Oct 15 '13 at 09:32

On :hover opacity 0.0 on other level in css

1 Answers1