悬停不工作，我不知道为什么答案

【问题标题】：Hover not working and I don't know why悬停不工作，我不知道为什么
【发布时间】：2017-02-14 15:35:15
【问题描述】：

您好，我是一个尝试制作自己的网站的初学者。我在尝试定位图像并赋予它悬停属性时遇到了麻烦，这是代码

<!DOCTYPE html>
<html>

<head>
  <title>Tu est fis de pute</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <style>
    div {
      height: 30px;
      width: 30px;
      position: absolute;
      top: 45%;
      left: 25%;
      -webkit-transition: width 2s, height 2s;
      transition: width 2s, height 2s;
    }
    div:hover {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>

  <img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%" />
  <div id="fbicon">
    <img src="icons/facebook.png" />
  </div>
</body>

</html>

我基本上是想在将鼠标悬停在图标上时带来放大效果，同时将图标放在我想要的位置。任何帮助将不胜感激！谢谢！

【问题讨论】：

对我来说很好用 - 看看这里jsfiddle.net/19mr3vuk

标签： jquery html css

【解决方案1】：

您可以使用scale 在悬停时放大整个 div：

div {
  height: 30px;
  width: 30px;
  position: absolute;
  background: teal;
  top: 45%;
  left: 25%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
div:hover {
  transform: scale(1.3);
}

<img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%" />
<div id="fbicon">
  <img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg" />
</div>

【讨论】：

【解决方案2】：

试试这个只改变css底线：

HTML

<img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%"/>
<div id="fbicon"><img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg"/> </div>

CSS

div{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 45%;
    left: 25%;
    -webkit-transition: width 2s, height 2s;
    transition:  width 2s, height 2s;
}
div:hover{
    width: 40px;
    height: 40px;
}
div img{width:100%; height:100%;}

【讨论】：

【解决方案3】：

您的代码不起作用的原因是您只更改了div 的height 和width 但其父div 内部的image 仍然具有相同的高度和宽度。

您可以更改图像相对于其父级 div 的大小

div img{
   width:100%; 
   height:100%;
}

或者直接在图片上应用悬停效果。

【讨论】：

【解决方案4】：

HTML：

<body>
<div id="fbicon">
<img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg"/> 
</div>
</body>

CSS：

 div img {
      height: 30px;
      width: 30px;
      position: absolute;
      top: 20%;
      left: 25%;
      -webkit-transition: width 2s, height 2s;
      transition: width 2s, height 2s;
    }
    div img:hover {
      width: 80px;
      height: 80px;
    }

【讨论】：