Question

如何在悬停在特定元素时更改不同元素的样式？

E.g。有多个div，如果鼠标悬停在特定的div上，你想要将其中一些的样式改为独特的个人样式。

＆＃13;

.standard {
    background-color: #D8D8D8;
    border: 1px solid black;
    height:60px;
    width:60px;
    margin:4px;
}

＆＃13;

<div class="standard" id="master"><center>HOVER HERE</center></div>
<div class="standard" id="element"><center>1</center></div>
<div class="standard" id="another_element"><center>2</center></div>
<div class="standard yet_another_element"><center>3</center></div>

＆＃13;

请运行示例。如果用户将鼠标悬停在ID为another_element的元素上，如何更改yet_another_element和background-color的不同样式属性（例如master）？

Answer 1

实际上，在您发布的情况下，您可以使用General Sibling Combinator(~)：

＆＃13;

.standard {
  background-color: #D8D8D8;
  border: 1px solid black;
  height: 60px;
  width: 60px;
  margin: 4px;
}
#master:hover,
#master:hover ~ .standard {
  background: red;
}

＆＃13;

<div class="standard" id="master">
  <center>HOVER HERE</center>
</div>
<div class="standard" id="element">
  <center>1</center>
</div>
<div class="standard" id="another_element">
  <center>2</center>
</div>
<div class="standard" id="yet_another_element">
  <center>3</center>
</div>

＆＃13;

如果您想为不同的元素设置不同的样式，请在评论中注明，只需选择它们：

＆＃13;

.standard {
  background-color: #D8D8D8;
  border: 1px solid black;
  height: 60px;
  width: 60px;
  margin: 4px;
}
#master:hover {
  background: red;
}
#master:hover ~ #element {
  background: blue;
}
#master:hover ~ #another_element {
  background: purple;
}
#master:hover ~ #yet_another_element {
  background: orange;
}

＆＃13;

<div class="standard" id="master">
  <center>HOVER HERE</center>
</div>
<div class="standard" id="element">
  <center>1</center>
</div>
<div class="standard" id="another_element">
  <center>2</center>
</div>
<div class="standard" id="yet_another_element">
  <center>3</center>
</div>

＆＃13;

Answer 2

＆＃13;

<head>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>

<div id="container">
  
<ul>
  <li>
      <div class="thumbnail"><img src="http://placehold.it/150x150" /></div>
      <div class="description">Lorem Ipsum</div>
  
  </li>
  
   <li>
        <div class="thumbnail"><img src="http://placehold.it/150x150" /></div>
        <div class="description">Lorem Ipsum</div>
    </li>
  
</ul>
  
</div>

＆＃13;

{{1}}

＆＃13;

Answer 3

您可以使用类似......

的内容

.standard {
    background-color: #D8D8D8;
    border: 1px solid black;
    height:60px;
    width:60px;
    margin:4px;
}
#master:hover ~ #another_element, #master:hover ~ .yet_another_element {
  background:red;
}

<强> DEMO

由于我们希望特定元素受到影响，因此我们必须在编写规则时定位单个元素。

Answer 4

只有在您尝试操作的元素是您正在悬停的元素（master）的子元素时，它才有效。

然后你可以使用这样的CSS代码来访问和操作这些元素：

使用ID

#master:hover #another_element {
    background-color: orange;
}

使用Class

#master:hover .yet_another_element {
    background-color: red;
}

实施例

＆＃13;

/* --- By using ID --- */
#master:hover #another_element {
    background-color: orange;
}

/* --- By using Class --- */
#master:hover .yet_another_element {
    background-color: red;
}


/*--- Irrelevant CSS Code...---*/
.standard {
    background-color: #D8D8D8;
    border: 1px solid black;
    height:60px;
    width:60px;
    margin:4px;
    color: white;
    font-weight: 600;
}

#element {
  background-color: green;
}

#master {
  background-color: #fafafa;
}

＆＃13;

<div id="master">
    <center>hover here</center>
    <div class="standard" id="element"><center>1</center></div>
    <div class="standard" id="another_element"><center>2</center></div>
    <div class="standard yet_another_element"><center>3</center></div>
</div>

＆＃13;

在悬停在特定元素时更改多个特定元素的样式

4 个答案:

实施例