Question

我有一个div，它是按钮图标的容器。当我将鼠标悬停在div上时，我想要更改按钮图标。我只能这样做，当我将鼠标悬停在图标上时，它会发生变化。

由于图标很小，当我像我想要的那样悬停在容器中时它不会改变。

这是一个jsfiddle：https://jsfiddle.net/qvf90pdd/2/

.page-buttons-container {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    background-color: white;
    margin: 0;
    float: left;
    cursor: pointer;
    background-color: blue;
}

.main-page-buttons {
    height: 60%;
    width: auto;
    display: inline-block;
    margin: auto;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1.5em;
    min-width: 20px;
}

.main-page-buttons:hover, .page-buttons-container:hover {
    background-color: #559254;
    color: white;
}

#view-page-settings:hover {
    content: url("http://imgur.com/SZ8Cm.jpg");
}

#view-page-settings {
    content: url("https://i.imgur.com/w9g543Q.png");
}

Answer 1

在此规则中，您说当容器悬停时，请为其应用样式：

.page-buttons-container:hover {...}

但你真正想说的是：当容器悬停时，将样式应用于其中的按钮：

.page-buttons-container:hover .main-page-buttons {...}

Answer 2

看看这个，我已经改变了你的代码，现在，当你将鼠标悬停在div上时，图像也会发生变化：

.page-buttons-container{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: white;
  margin:0 ;
  float: left;
  cursor: pointer;
  background-color:blue;
}
 .main-page-buttons{
  height: 60%;
  width: auto;
  display: inline-block;
  margin: auto;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1.5em;
  min-width: 20px;
}

 .main-page-buttons:hover, 
 .page-buttons-container:hover{
	 background-color: #559254;
	 color: white;
 }
 
 .page-buttons-container:hover #view-page-settings {
	 content:url("http://imgur.com/SZ8Cm.jpg");
 }
 
 #view-page-settings{
   content:url("https://i.imgur.com/w9g543Q.png");
 }

<div id="view-settings-container" class="page-buttons-container">
  <img id="view-page-settings" class="main-page-buttons" alt="Settings"/>
</div>

更改父母悬停的img内容

2 个答案: