Question

我有一张名为div的图像。它有一个CSS属性visibility:hidden;。我有另一个叫做按钮的按钮。

我需要的是当我将鼠标悬停在按钮上时，图像会变为visibility:visible;。

我可以使用CSS进行操作，还是必须使用JavaScript？

Answer 1

是的，你可以这样做

就像这样

<强> 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 *

Answer 2

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

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

Answer 3

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

如果你把它变成其他东西的孩子（即不是按钮，可以采用不同的方式），这是可能的。

然而，什么浏览器？所有主要的？因为如果你愿意通过使用兄弟选择器只使用最现代的。

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

Answer 4

你需要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" />

在悬停另一个元素时更改元素的CSS属性

4 个答案: