1

我有一个div被调用的图像。它有一个 CSS-property visibility:hidden;。我有另一个按钮叫做按钮。

我需要的是当我悬停按钮时，图像变为visibility:visible;.

我可以使用 CSS 还是必须使用 JavaScript？

4

4 回答 4

4

是的，你可以这样做

像这样

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;
}

现场演示

更新的答案

如果您只想悬停而不是查看此*演示*

于 2012-08-08T09:39:46.097 回答
2

请注意，这是一个 javascript / jQuery 解决方案：

$(button).hover(function() {
    $('div#image').attr('visibility', 'visible');
}, function() {
    $('div#image').attr('visibility', 'hidden');
});
于 2012-08-08T09:39:21.113 回答
0

如果 div 是按钮的子级，则只能执行此操作 - 这是不可能的。

如果你让它成为其他东西的孩子（即不是一个按钮，做不同的事情），这是可能的。

但是，什么浏览器？所有主要的？因为如果您愿意只使用最现代的，则可以使用兄弟选择器。

但是对于主流用法，只有当 div 是悬停元素的子元素时才能这样做。注意：您可以悬停任何东西，它不必是按钮或链接<a>。所以这就是我要做的 - 制作一个看起来像按钮的 div 元素，并且有一个您想要更改的子元素。

于 2012-08-08T09:36:26.387 回答
-1

为此，您需要 javascript。如果您的 div 是按钮的父级，则可以使用 css，但在您的情况下，这是不可能的 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-08T09:38:28.643 回答