Question

这是我的代码：

div img{
  position: absolute;
}
  div img:nth-child(1){
  top: 50px;
  left: 80px;
  transform: scale(0.8);
}
div img:nth-child(2){
  top: 50px;
  left: 80px;
  transform: scale(0.7);
}
img:hover{
  transform: scale(1);
}

<html>
    <body>
    	<div>
           <img src="pic1.jpg" width="100" height="100"/>
           <img src="pic2.jpg" width="100" height="100"/>
    	</div>
    </body>
</html>

然后，如果我将图片悬停，则它们都无法激活

transform: scale(1);

但是，如果我这样更改css：

div img:hover{
    transform: scale(1);
}

然后：hover内部的转换通常可以按预期进行。为什么会发生这种情况？非常感谢。

Answer 1

删除所有 css div样式声明之前的img。

它是由于特定性而发生的-当您设置更具体的规则（例如div img {}）时，它会覆盖不太具体的CSS规则img {}

About specificity

特异性是浏览器决定哪个CSS属性的方式值与元素最相关，因此将是应用。特异性基于组成的匹配规则不同种类的CSS选择器。

img {
  position: absolute;
}

img:nth-child(1) {
  top: 50px;
  left: 80px;
  transform: scale(0.8);
}

img:nth-child(2) {
  top: 50px;
  left: 80px;
  transform: scale(0.7);
}

img:hover {
  transform: scale(1);
}

<div>
  <img src="pic1.jpg" width="100" height="100" />
  <img src="pic2.jpg" width="100" height="100" />
</div>

Answer 2

您的样式div img:nth-child(1) { }比img:hover{ }样式更具体。这就是为什么它超越了您的风格。

您可以采用已经使用的方法，也可以使用！important之类的img:hover{ transform: scale(1) !important; }

<html>

<head>
  <title></title>
  <style>
    div img {
      position: absolute;
    }
    
    div img:nth-child(1) {
      top: 50px;
      left: 80px;
      transform: scale(0.8);
    }
    
    div img:nth-child(2) {
      top: 50px;
      left: 80px;
      transform: scale(0.7);
    }
    
    img:hover {
      transform: scale(1) !important;
    }
  </style>
</head>

<body>
  <div>
    <img src="https://picsum.photos/200" width="100" height="100" />
    <img src="https://picsum.photos/200" width="100" height="100" />
  </div>
</body>

</html>

内部转换：悬停无法激活

2 个答案: