Question

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

<!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>

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

Answer 1

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 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%;}

Answer 3

您的代码无法正常工作的原因是因为您只更改<div data-page="autocomplete" class="page toolbar-fixed page-on-center">的{{1}}和height，但 width内的div父image仍具有相同的高度和宽度。

您可以相对于其父div更改图像尺寸，例如

div

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

Answer 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;
    }

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

4 个答案: