2012-12-26 4 views
6

私がしたいこと、私は赤に白例えば要素(CSSで作られたボックス)、別の色から身体の変化のbackground colorを置くと。問題は、これはCSSのみを使用し、javascriptを使用して行うべきでないということです。 javascriptを必要に応じて使用しなければならない場合は、マウスの上の色を元の色に戻す必要があります。変更ボディBGCOLORのみ

--------------- --------------- EDIT実際

私はこのしようとしていた:

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

はちょうどあなたがこれまでに...でも、それは間違っている試みているものを私たちに示しています。私はあなたが尋ねる前に何か試してみたいです。 –

+0

これは[** CSS **](http://stackoverflow.com/q/1014861/1577396)のみを使用して行うことができますが、[**推奨**](http://css-tricks.com/parent-セレクタ - イン - css /)。 –

答えて

10

ピュア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; 
}​ 
+0

ありがとう、あなたの返事です。このCSSスクリプトは動作します!!!実際には、私はjavascriptなしで1つを必要とし、あなたdidi。 – sdnr1

+0

あなたはようこそ=] – Tymek

+0

@ティメクよい解決策! – VJS

1

:hoverセレクタを使用して、この

<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> 
+0

ボディの背景色が変わるべきであり、それを変えるためにマウスを動かさなければならないdivではない。 – sdnr1

+0

divの代わりに必要な要素を使用できます。 – Sky5005e

1

ように使用してください。 非常に違ったことをしない限り、それはかなりストレートなようです。参考のために一例を以下

チェック:

.classname { 
    background-color:white; 
} 

.classname:hover { 
    background-color:red; 
} 
+0

ボディの背景色は変わるべきであり、それを変更するためにはマウスを動かさなければならないdivではない。 – sdnr1

+0

あなたの編集した質問を見た後、@ティメクの答えが最善の解決策です。正解としてください。 – VJS

0

Working fiddle

あなたは多くのタイプミスのコードで、このようなbackgroungとしてbackgroundをmispellingとID(#div)としてdivの治療などがあります。あなたが強制的に使用javascriptやjQueryのをしなければならない親タグの上にマウスを移動するには

CSS(タイプミスへの説明と

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

。もしそうなら、あなたはこのinteresting link通過することができますが、なぜ親タグを選択するために何の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のに新しいしていると仮定すると、HTMLのタグheadに上記の機能を動作させるために、以下のようなものがリンクを与えます。

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

チェックこのWorking fiddle

+0

いいえ、javascript、ちょうどCSS。 –

+0

@Zachdev私は[** CSS **](http://stackoverflow.com/q/1014861/1577396)を使用する方法を知っていますが、[**推奨**]ではありません(http:// css-tricks .com/parent-selectors-in-css /)ちょうどタイトルを読んでいない、あまりにも投稿を読んでください。 –

関連する問題