当前位置: 首页 > 面试题库 >

仅使用CSS在将div悬停时更改主体bgcolor

温凯
2023-03-14
问题内容

我希望当我将一个元素(用css制成的盒子)悬停时,background color主体的颜色从一种颜色变为另一种颜色,例如白色变为红色。问题在于,应该仅使用CSS而不使用JavaScript来完成此操作。而且,如果必须使用javascript,则在鼠标移开时,颜色应更改回前一颜色。

- - - - - - - -编辑 - - - - - - - -

其实我正在尝试:

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

问题答案:

纯CSS实验:

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


 类似资料:
  • 我想改变两个div的位置时悬停在一个div。在下面的代码中,当我悬停在.img div上时,我想移动顶部的.title div(位置例如top:50px),并在其下方显示最初设置为隐藏的.info div。 我正在尝试跟随代码,但似乎不工作的悬停。我将感谢任何帮助。 HTML: CSS: 演示。http://jsfidle.net/upwv3/

  • 问题内容: 当有人将鼠标悬停在元素上时,我想显示一个div ,但是我想在CSS中而不是在JavaScript中执行此操作。您知道如何实现吗? 问题答案: 您可以执行以下操作: 这使用相邻的兄弟选择器,是the下拉菜的基础。 HTML5允许锚元素包装几乎所有内容,因此在这种情况下,该元素可以成为锚的子元素。否则原理是相同的-使用伪类更改另一个元素的属性。

  • 问题内容: 我有一个问题,我将一个图像设置为当鼠标悬停时显示另一个图像,但是第一个图像仍然出现,新的图像不会更改高度和宽度,而会与另一个图像重叠。我对HTML / CSS还是很陌生,所以我可能错过了一些简单的东西。这是代码: 问题答案: 一种解决方案是将第一个图像也用作背景图像,如下所示: 如果您的悬停图片大小不同,则必须将它们设置为:

  • 问题内容: 我有一个链接图像。当用户将鼠标悬停在链接上时,我想显示不同的图像。 目前,我正在使用以下代码: 但是我遇到了很多问题:div没有选择CSS规则(当我在Firebug中查看元素时,该元素只是没有显示相关的CSS规则)。 也许这是因为(据我所知)这是无效的HTML:您不能在周围加上。但是,如果切换到该位置,似乎会遇到更大的问题,因为您不能可靠地在span上设置高度和宽度。 帮帮我!我该如何

  • 问题内容: 这是一个常见的问题。它几乎总是被关闭,作为以下问题的重复项:是否有CSS父选择器? 重复项很好地指出了CSS不能定位父元素。但是,它对于原始问题几乎没有提供任何指导,而原始问题可能会在XY问题中陷入困境。 在这种情况下… 悬停孩子时如何更改父母的背景颜色? …至少有一种CSS解决方案可以解决该问题。 问题答案: 尽管无法使用CSS选择父元素,但是您可以使用另一种方法来完成任务。 您希望