7

要素（cssで作成されたボックス）にカーソルを合わせるbackground colorと、ボディの色が白から赤など、ある色から別の色に変わります。問題は、JavaScript を使用せずに CSS のみを使用してこれを行う必要があることです。また、JavaScript を使用する必要がある場合は、マウス アウト時に色が前の色に戻るはずです。

- - - - - - - -編集 - - - - - - - -

実際に私はこれを試していました：

body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
4

4 に答える 4

12

純粋な CSS の実験:

http://jsfiddle.net/Tymek/yrKRX/

HTML

<div id="trigger"></div>
<div id="bg"></div>​

CSS

body {
    height: 100%;
}

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    widht: 100%;
    height: 100%;
    z-index: 1;
    background: #EEE;
}

#trigger {
    position: absolute;
    width: 200px;
    height: 136px;
    top: 50%;
    left: 50%;
    margin: -68px 0 0 -100px;
    background: #333;
    z-index: 2;
}

/* KEY */
#trigger:hover ~ #bg {
    background: #EE0;
}​
于 2012-12-26T11:31:39.167 に答える
1

このように使ってください

<html>
   <body>

     <style type="text/css">   

       .top{  
           background:red;
       }

       .top2{   
           background:white;
       }
     </style>

    <div class="top" onmouseover="this.className='top2'" 
                    onmouseout="this.className='top'">Here</div>
  </body>
</html>
于 2012-12-26T11:19:17.573 に答える
1

:hoverセレクターを使用します。よほど違うことをしていない限り、それはかなり簡単に思えます。

参照用に次の例を確認してください。

.classname {
    background-color:white;
 } 

 .classname:hover {
    background-color:red;
 }
于 2012-12-26T11:23:38.023 に答える
-2

働くフィドル

スペルミスやID ( ) としてのbackground扱いbackgroungなど、コードに多くのタイプミスがあります。div#div

CSS (タイプミスの説明付き)

body{background: #000;}                /*backgroung (mis-spelled)*/
div{width:100px;                       /*#div (treated as ID)*/
    height:100px;
    border:1px solid black;}

親タグにカーソルを合わせるには、JavaScript または jQueryを強制的に使用する必要があります。なぜ親タグを選択するための css プロパティがないのか疑問に思うかもしれません。もしそうなら、この興味深いリンクをたどることができます。ほとんどの場合、親セレクターの概念を回避するために、CSS のポジショニングを使用して回避できます (Tymek のソリューションを確認してください)。

jQuery

$(document).ready(function(){
    $("div").hover(function(){
        $(this).parent(this).css('background-color','red');
    });

    $("div").mouseleave(function(){
        $(this).parent(this).css('background-color','white');
    });
});​

あなたがjQueryに慣れていないと仮定するとhead、上記の機能を機能させるために、以下のようなHTMLのタグにリンクを付けてください。

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

この作業フィドルを確認してください

于 2012-12-26T11:32:17.887 に答える