Html 使用 CSS 在鼠标悬停时放大图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12853987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enlarge image on mouseover with CSS
提问by user1737587
I am trying to create a simple image link button that when I move my mouse on it, it gets a bit larger. I managed to do it with this simple code below but now I just want to move also the paragraph when the image is getting larger..
我正在尝试创建一个简单的图像链接按钮，当我将鼠标移到它上面时，它会变大一点。我设法用下面这个简单的代码来做到这一点，但现在我只想在图像变大时移动段落..
Any hints on how I can select and move the paragraph when I hover over the image?
当我将鼠标悬停在图像上时，有关如何选择和移动段落的任何提示？
<div id="rightImage">
<a href="http://blabla.com" target="_blank"> <img src="images/image.jpg" alt="image" onmouseover="this.className='mouseOver'" onmouseout="this.className='mouseOut'" /></a>
<p>paragraph</p>
</div>
#rightImage
{
width:275px;
height:275px;
float:left;
position:relative;
}
.mouseOver
{
width:300px;
height:300px;
top:-40px;
z-index:1;
position:absolute;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
.mouseOut
{
width:275px;
height:275px;
float:left;
margin-right:52px;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
回答by enhzflep
This enlarges the image, increases the size of the shadow and keeps the <p> element visible.
这会放大图像，增加阴影的大小并保持 <p> 元素可见。
(EDIT: I forgot to encode the angled braces around the p)
（编辑：我忘了对 p 周围的斜括号进行编码）
Perhaps it's what you need?
也许这就是你所需要的？
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#rightImage
{
height:275px;
float:left;
position:relative;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
#rightImage:hover img
{
height: 300px;
box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
}
</style>
</head>
<body>
<div id="rightImage">
<a href="http://blabla.com" target="_blank"> <img src="img/redBaron.jpg" alt="image"/></a>
<p>paragraph</p>
</div>
</body>
</html>
回答by Sowmya
Remove position:absolute
消除 position:absolute
.mouseOver
{
width:300px;
height:300px;
z-index:1;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
回答by Abdul Malik
Try this. I hope it works for you.
尝试这个。我希望这个对你有用。
<div id="rightImage">
<a href="http://blabla.com" target="_blank"> <img src="images/image.jpg" alt="image" width="275px" height="275" /></a>
<p>paragraph</p>
</div>???????????????????
use this css
使用这个 css
#rightImage{
width:275px;
height:275px;
float:left;
position:relative;}
#rightImage:hover{
width:300px;
height:300px;
top:-40px
z-index:1;
position:absolute;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;}
#rightImage:hover p {
position:relative;
margin-top:30px;}?
