當懸停另一個元素時更改元素的CSS屬性

我有一個叫做image的div。它有一個CSS屬性visibility:hidden;。我有另一個按鈕叫做按鈕。當懸停另一個元素時更改元素的CSS屬性

我需要的是當我將鼠標懸停在按鈕上時，圖像變爲visibility:visible;。

我可以用CSS來做還是必須使用JavaScript？

來源

2012-08-08 Zeroic

的Java？也許你的意思是Javascript。 – 2012-08-08 09:33:52

發佈您的代碼片段。另外：你到目前爲止嘗試過什麼？ – Sirko 2012-08-08 09:35:06

JavaSCRIPT。 Java和JavaScript是兩個完全不同的東西。推測你的意思是後者。另外，發佈這個問題的相關HTML。 – Bojangles 2012-08-08 09:36:19

如果div是按鈕的子元素，則只能這樣做 - 這是不可能的。

如果你把它變成別的東西的孩子（也就是說不是一個按鈕，可以做不同的事）。

但是，什麼瀏覽器？所有主要的？因爲如果你願意使用最現代化的話，可以使用兄弟選擇器。

但是，對於主流使用情況，只能在div是懸停元素的子元素時使用。注意：你可以懸停任何東西，它不一定是一個按鈕或鏈接<a>。所以這就是我會做的 - 使一個div元素看起來像一個按鈕，並有一個孩子，你想改變。

來源

2012-08-08 09:36:26 Ariel

它不一定是個孩子。例如：'

Toggle visibility

'''div {visibility：hidden; } button：hover + div {visibility：visible; }'這將在IE7和所有更新的瀏覽器中工作。（我不知道我是否沒有閱讀關於「兄弟選擇器」的答案中的部分內容，或者是否在我編寫此評論之前對其進行了編輯）。 – thirtydot 2012-08-08 09:38:55

@thirtydot我沒有編輯它 - 您沒有閱讀它。您可以清楚地看到答案中沒有「編輯」信息。因爲你缺乏閱讀能力，你會低估我？ – Ariel 2012-08-08 09:46:33

我在這裏沒有downvoted任何東西。你可以得到同情upvote，你的答案不值得downvote。我以爲你可能編輯過它，因爲我在寫評論時看到了你的答案上的「實時編輯通知」。在前五分鐘內做出的任何編輯都不會顯示爲新版本。 – thirtydot 2012-08-08 09:49:30

-1

您需要JavaScript才行。您可以使用CSS，如果你的DIV是按鈕的父，但在你的情況下，這是不可能的 JS

function changeVisibility(objID) { 
    var el = document.getElementById(objID); 
    if(el.style.visibility == 'hidden') { 
     el.style.visibility = 'visible'; 
     return true; 
    } 

    el.style.visibility = 'hidden'; 

}

HTML

<div id="box">Something to show</div> 
<input type="button" class="button" onmouseover="changeVisibility('box')" value="Change visibility" />

來源

2012-08-08 09:38:28

請注意，這是一個JavaScript/jQuery的解決方案：

$(button).hover(function() { 
    $('div#image').attr('visibility', 'visible'); 
}, function() { 
    $('div#image').attr('visibility', 'hidden'); 
});

來源

2012-08-08 09:39:21

是的，你可以做到這一點

因爲這樣

HTML

<label for="button">Click here</label> 
<input type="checkbox" id="button"> 

    <div class="one">Show my div</div>

的CSS

label{ 
background:green; 
    padding:10px; 
} 
.one{ 
width:100px; 
    display:none; 
    height:100px; 
    background:red; 
    margin-top:20px; 
} 
input[type="checkbox"]{ 
visibility:hidden; 

} 
input[type="checkbox"]:checked ~ .one{ 
display:block; 
}

Live demo

更新答案

，如果你想只需將鼠標懸停比檢查這個 * Demo *

來源

2012-08-08 09:39:46

他說懸停沒有檢查，你應該更新你的答案。 – Ariel 2012-08-08 09:51:40

@Ariel只爲你檢查這個鏈接，如果你想只是懸停，這是非常簡單的http://tinkerbin.com/0TAAeaf – 2012-08-08 09:51:51

謝謝Thast我需要什麼:) – Zeroic 2012-08-08 10:37:43

當懸停另一個元素時更改元素的CSS屬性

回答

相關問題