3

div bg color別のマウスの上にマウスを置いたときに Fromを変更するにはどうすればよいdivですか??

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.Div1{width:100px; height:100px; background-color:red; float:left; margin-right:30px; }
.Div2{width:100px; height:100px; background-color:#00C; float:left }
</style>
</head>
<body>
<div class="Div1">asdlsakd</div>
<div class="Div2">asdsa</div>
</body>
</html>

どうすればdiv2 いいですか？

これは私のフィドル リンクです: http://jsfiddle.net/anupkaranjkar/S5Yu5/

4

7 に答える 7

5

jQuery の方法:

使っjQuery .show();て.hide();機能してみてください。

HTML:

<div id="div1">This is div1</div>
<div id="div2">This is div2</div>

CSS:

#div1{
    width:100px;
    height:100px;
    background-color:red;
}

#div2{
    width:100px;
    height:100px;
    background-color:blue;
    display:none;
}

jQuery:

$("#div1").hover(function() {
    $("#div2").show();
    }, 
function() {
    $("#div2").hide();
});

にリンクすることを忘れないでくださいjquery.min.js。

タグに追加<script src="http://code.jquery.com/jquery-latest.min.js"></script>します。<head></head>それ以外の場合は機能しません。

このフィドルを見てください

編集：

純粋な CSS:

次のように、div の周りにコンテナーを配置します。

<div id="content">
    <div id="div1">This is div1</div>
    <div id="div2">This is div2</div>
</div>

その後、次のように使用でき:first-childます:hover。

//styling your divs
#div1{
    width:100px;
    height:100px;
    background-color:red;
}

#div2{
    width:100px;
    height:100px;
    background-color:blue;
    display:none;
}

//hover function
#content > div:first-child{
    display:block;
}

#content > div:hover + div {
    display:block;
}

実際に見たい場合は、このデモをご覧ください

于 2013-10-16T12:40:33.157 に答える
0

必要なのは:hover

Div1:hover {
  background-color:yellow;
}
于 2013-10-16T12:09:07.893 に答える
0

要素の直後に配置されているすべての要素を選択してスタイルを設定します。

 .first:hover +div{background:red;}  
    <div class="first"> 
          some    
      </div>
      <div>other</div>

例2

   .first:hover div{background:red;}

   .first{border:1px solid blue;width:100px;height:100px}

      <div class="first"> 

          <div>other</div>
      </div>
于 2013-10-16T12:11:25.113 に答える
-1

これを実現するために div2 を作成する必要はありません。

Div1{width:100px; height:100px; background-color:red; }
Div1:hover{width:100px; height:100px; background-color:blue; }

:hover疑似セレクターを既存の div1 に適用するだけで、ホバー効果が得られます。

于 2013-10-16T12:09:15.667 に答える