Change the opacity of an image on hover of a separate button

Question

#menu{
    opacity: 0;
    margin: 100px auto;
    background-color: #edf4da;
    border-style: solid;
    border-width: 1px;
    border-color: #c4efb6;
    width: 600px;
    height: 300px;
    -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
            border-radius: 12px;
}

.shadow{
    box-shadow: 0px 0px 5px #888888;
}


#startButton{
    opacity: 0.5;
    margin: 20px auto;
    background-color: #54fb8d;
    border-style: solid;
    border-width: 1px;
    border-color: #c4efb6;
    width: 90px;
    height: 40px;
    -webkit-border-radius: 7x;
        -moz-border-radius: 7px;
            border-radius: 7px;
}



#startButton:hover #menu{  /*this is where I am having a problem*/
    opacity: 1;
    -webkit-transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;
}

////////HTML////

<!DOCTYPE html>
<html>
<head>
<title>Ubiquity</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="menuwbutton">
    <div id="menu"> 
    </div>
    <div id="startButton">
    </div>
</div>

</body>

</html>

I want the opacity of #menu to change when I hover over #startButton. I've searched, but I haven't found any information on this topic. If this question was already asked, can you give me a link to it? Thanks!

If I guess what your HTML looks like, it's working http://jsfiddle.net/UTkBU/ — doitlikejustin, Oct 09 '13 at 02:13
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Paulie_D, Oct 09 '13 at 10:54

Tom Heard · Accepted Answer · 2013-10-09T02:47:46.827

0

I would do this in Javascript. Example jQuery code:

$("#startButton").hover(function(){
   $("#menu").fadeTo(500,1); 
}, function(){
    $("#menu").fadeTo(500,0);
});

Just because jQuery is fun

Or something like this so you can use the menu:

$("#startButton").hover(function(){
    $("#menu").fadeTo("500", 1); 
}, function(){});

$("#menu").hover(function(){}, function() {
    $("#menu").fadeTo("500", 0);
});

edited Oct 09 '13 at 02:47

answered Oct 09 '13 at 02:16

Tom Heard

1,218
10
20

Thanks! But is there no css only solution? – noby Oct 09 '13 at 02:52
@noby No CSS solution as you are trying to select a parent element: See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Paulie_D Oct 09 '13 at 10:54
Thanks everyone! I appreciate your help! – noby Oct 10 '13 at 02:49

Change the opacity of an image on hover of a separate button

1 Answers1