3

div bg color当我将鼠标悬停在另一个...上时，我该如何更改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 way:

Try to use jQuery .show(); and .hide(); function.

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();
});

Don't forget to link to jquery.min.js.

Add <script src="http://code.jquery.com/jquery-latest.min.js"></script> to your <head></head> tag. Otherwise it won't work.

Have a look at this fiddle

EDIT:

Pure CSS:

Put a container around your divs like this:

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

after that you can use :first-child and :hover in this way:

//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;
}

If you want to see it in practise have a look at this demo

于 2013-10-16T12:40:33.157 回答
1

正如上述用户所说，您应该使用它:hover来实现这一点。但是，他们为您提供了一个示例，当您将鼠标悬停在 div 本身时该怎么做。

您的问题是，如果您将鼠标悬停在另一个 div 上，如何更改颜色，所以代码如下，但这意味着第二个 div 嵌套在第一个 div 中：

Div1:hover Div2 {
    background-color: yellow;
}

这是一个使用 JQuery 实现的示例，无论它们是否嵌套都无关紧要：

var defaultBackground = $("div#two").css("background-color");
$( "div#one" )
  .mouseover(function() {
      $("div#two").css("background-color", "yellow");
  })
  .mouseout(function() {
    $("div#two").css("background-color", defaultBackground);
  });

http://jsfiddle.net/d58Rb/

为了匹配您的 HTML 代码，我更新了 JSFiddle：http: //jsfiddle.net/S5Yu5/1/

以防万一其他人需要这个解决方案（我在任何地方都看不到）

使用 CSS/HTML 可以做到这一点，但前提是 div 直接位于彼此下方。

#Div1:hover + Div2 {
    background-color: yellow;
}
于 2013-10-16T12:10:22.573 回答
1

像这样使用： 

<div id="mydiv" style="width:200px;background:white"  onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Hello World!
</div>
于 2013-10-16T12:10:43.283 回答
0

你需要的是:hover

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

你可以用css简单地做到这一点

Div1:hover {
      background-color:yellow;
}

或者

用 jQuery

$("div").hover(function() { // mouseenter
    $(this).addClass("hover");
    }, function() { // mouseleave
    $(this).removeClass("hover");
});

css

.hover {
      background-color:yellow;
}
于 2013-10-16T12:10:42.403 回答
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 回答