当悬停另一个元素时更改元素的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属性

回答

相关问题