我希望当我将一个元素(用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选择父元素,但是您可以使用另一种方法来完成任务。 您希望