上一個單獨的按鈕的懸停改變圖像的透明度

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

我想#menu的不透明度改變，當我徘徊結束#startButton。我已經搜索過，但我還沒有找到關於此主題的任何信息。如果這個問題已經被問到，你能給我一個鏈接嗎？謝謝！

來源

2013-10-09 noby

發佈的HTML代碼也 –

結構是什麼你的HTML看起來像，它工作http://jsfiddle.net/UTkBU/ – doitlikejustin

可能的重複[有沒有CSS父母選擇器？]（http://stackoverflow.com/questions/1014861/is-there-a-css -parent-selector） –

我會用Javascript來做到這一點。示例jQuery代碼：

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

只是因爲jQuery是樂趣

或者這樣的事情，所以你可以使用菜單：如果我猜

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

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

來源

2013-10-09 02:16:14

謝謝！但是，沒有唯一的解決方案嗎？ – noby

@noby沒有CSS解決方案，因爲您試圖選擇父元素：請參閱http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector –

謝謝大家！我感謝您的幫助！ – noby

上一個單獨的按鈕的懸停改變圖像的透明度

回答

相關問題