悬停不起作用，我不知道为什么
[英]Hover not working and I don't know why
问题描述
Hi I am a beginner trying to make my own website.
嗨，我是一个初学者，试图制作自己的网站。 I have had troubles trying to position an image and endow it with a hover property, here's the code我在尝试定位图像并为其赋予悬停属性时遇到了麻烦，这是代码
<!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>
I am basically trying to bring a enlargement effect when hovered over the icon, whilst putting the icon where I want.我基本上是试图在将鼠标悬停在图标上时带来放大效果，同时将图标放在我想要的位置。 Any help will be appreciated!任何帮助将不胜感激！ Thanks!谢谢！
4 个解决方案
解决方案1
1 2017-02-14 07:07:48
You can use scale to enlarge whole div on hover:您可以使用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-qc-50-50-2.jpg" /> </div>
解决方案2
0 2017-02-14 07:11:35
Try this only change css bottom line:试试这个只改变css底线：
HTML 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 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
0 2017-02-14 07:21:04
The reason why your code didn't work because you are only changing the height and width of the div but the image inside its parent div still have the same height and width .您的代码不起作用的原因是因为您只是更改了div的height和width ，但其父div内的image仍然具有相同的高度和宽度。
Either you change the image size with respect to its parent div like要么你改变图像大小相对于它的父div像
div img{
width:100%;
height:100%;
}
Or directly apply the hover effect on the image.或者直接在图片上应用悬停效果。
解决方案4
0 2017-02-14 07:35:15
HTML: HTML：
<body>
<div id="fbicon">
<img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg"/>
</div>
</body>
CSS: 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.