HTMLCSS – 过渡选择器

概述我有这样的设置： <div id="wrapper"> <div id="inner_01"></div> <div id="inner_02"></div> <div id="inner_03"></div></div> 我想构建一个具有以下属性的转换： >当鼠标悬停在inner_01上时,inner_02和inner_03的背景颜色应该更改. >当鼠标悬停在inner_02上时, 我有这样的设置：

<div ID="wrapper">  <div ID="inner_01"></div>  <div ID="inner_02"></div>  <div ID="inner_03"></div></div>

我想构建一个具有以下属性的转换：

>当鼠标悬停在inner_01上时,inner_02和inner_03的背景颜色应该更改.
>当鼠标悬停在inner_02上时,inner_01和inner_03的背景颜色应该改变.
>当鼠标悬停在inner_03上时,inner_01和inner_02的背景颜色应该更改.

这是我目前的做法：

>将鼠标悬停在inner_01上：

#wrapper #inner_01:hover ~ #inner_02 {  /* Transition *  Transition: background 5s;  /* color */  background: #ffee00;}/* Don't kNow how to effect inner_03 */

>将鼠标悬停在inner_02上：

#wrapper #inner_02:hover ~ #inner_03 {  /* Transition *  Transition: background 5s;  /* color */  background: #ffee00;}/* Don't kNow how to effect inner_01 */

>将鼠标悬停在inner_03上：

/* Don't kNow how to effect inner_01/inner_02 */

我想我错过了某种css选择器……
谢谢您的帮助 ：)

解决方法 写出来,这需要JavaScript中的这样的东西(没有任何库).

document.getElementByID('inner_02').addEventListener("mouseenter",function(event) {     document.getElementByID('inner_01').classList.add('newbkgnd');});document.getElementByID('inner_02').addEventListener("mouseleave",function(event) {     document.getElementByID('inner_01').classList.remove('newbkgnd');});document.getElementByID('inner_03').addEventListener("mouseenter",function(event) {     document.getElementByID('inner_01').classList.add('newbkgnd');  document.getElementByID('inner_02').classList.add('newbkgnd');});document.getElementByID('inner_03').addEventListener("mouseleave",function(event) {     document.getElementByID('inner_01').classList.remove('newbkgnd');  document.getElementByID('inner_02').classList.remove('newbkgnd');});

/* make the divs visible initially. Just for deBUGging purposes */#wrapper > div { wIDth: 20em; height: 2em; margin:.5em 0;  border:1px solID;  /* Transition */  Transition: background-color .5s;}#inner_01:hover ~ #inner_02,#inner_01:hover ~ #inner_03,#inner_02:hover ~ #inner_03,.newbkgnd {  /* color */  background-color: #ffee00;}

<div ID="wrapper">  <div ID="inner_01"></div>  <div ID="inner_02"></div>  <div ID="inner_03"></div></div>

编辑：或者,当然,基于@ nicael的答案,这个更简单的CSS解决方案……

/* make the divs visible initially. Just for deBUGging purposes */#wrapper > div { wIDth: 20em; height: 2em; margin:.5em 0;  border:1px solID;  /* Transition */  Transition: background-color .5s;}#wrapper:hover > div {  /* color */  background-color: #ffee00;}#wrapper:hover > div:hover {  background-color: inherit;}

<div ID="wrapper">  <div ID="inner_01"></div>  <div ID="inner_02"></div>  <div ID="inner_03"></div></div>

总结

以上是内存溢出为你收集整理的HTML / CSS – 过渡选择器全部内容，希望文章能够帮你解决HTML / CSS – 过渡选择器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。