Question

我有几个像THIS一样排列的兄弟div：

Session["LastError"]

div {
    text-align: center;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
div:hover {
    background-color: #b5b5b5;
}
 
/*color changes*/
.a:hover ~ .b {
   background-color: #E6E600;
}
.b:hover + .a {
    background-color: #ccffcc;
}

有没有办法让它当我将鼠标悬停在方框b上时，框a的属性会发生变化？

编辑：我想改变“a”的背景颜色

Answer 1

您可以使用jQuery：

来实现这一目标

＆＃13;

.c {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="a">Box A</div>
<div>another box</div>
<div>another box</div>
<div>another box</div>
<div class="b">Box B</div>

＆＃13;

[
  {
    "modulename": "module1",
    "functions": [
      {
        "functionname": "get",
        "function": "function1"
      },
      {
        "functionname": "delete",
        "function": "function2"
      }
    ]
  }
]

＆＃13;

Example here

Answer 2

这是一个有趣的方法

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0;
   color: gold;
}


<div class="rating">
            <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
        </div>

示例：https://css-tricks.com/examples/StarRating/

我可以将鼠标悬停在div上并在之前更改div的属性吗？

2 个答案: