1

div呼び出された画像があります。CSSプロパティがあります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;
}

ライブデモ

更新された回答

これをチェックするよりもホバーしたい場合は* Demo *

于 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 が hover 要素の子である場合にのみ実行できます。注: ボタンやリンクである必要はありません<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 に答える