7

我希望当我悬停一个元素（一个用css制作的盒子）时，background color身体的颜色从一种颜色变为另一种颜色，例如白色变为红色。问题是这应该只使用css而不是javascript来完成。如果必须使用 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

工作小提琴

您的代码中有许多拼写错误，例如拼写错误和background视为ID ( )。backgroungdiv#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 新手，请在headHTML 标记中提供一个链接，如下所示，以使上述功能正常工作。

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

检查这个工作小提琴

于 2012-12-26T11:32:17.887 回答