如何更改div颜色?

Anu*_*kar 3 html css

div bg color当我将鼠标悬停在另一个div...时,如何更改From ?

 <!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>
Run Code Online (Sandbox Code Playgroud)

当我将鼠标悬停在 div1 上时,我想将 div1 的颜色更改为黄色,我该div2 怎么做???

这是我的小提琴链接:http : //jsfiddle.net/anupkaranjkar/S5Yu5/

Rom*_*man 5

jQuery方式:

尝试使用jQuery .show();.hide();功能。

HTML:

<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

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

#div2{
    width:100px;
    height:100px;
    background-color:blue;
    display:none;
}
Run Code Online (Sandbox Code Playgroud)

jQuery:

$("#div1").hover(function() {
    $("#div2").show();
    }, 
function() {
    $("#div2").hide();
});
Run Code Online (Sandbox Code Playgroud)

不要忘记链接到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>
Run Code Online (Sandbox Code Playgroud)

之后,您可以以这种方式使用: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;
}
Run Code Online (Sandbox Code Playgroud)

如果你想在实践中看到它,看看这个演示