用CSS在mouseover上放大图像

我想创建一个简单的图像链接按钮，当我将鼠标移动它时，它会变大一些。我设法用下面这个简单的代码来做到这一点，但现在我只想在图片变得越来越大的时候移动段落。用CSS在mouseover上放大图像

当我将鼠标悬停在图片上时，如何选择和移动段落？

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

来源

2012-10-12 user1737587

for mouseover and mouseout在css元素中有一个属性：hover ...为什么你不使用这个？ –

这扩大了图像，增加了阴影的尺寸，并保持<p>元件可见。

（编辑：我忘了编码与p围绕倾斜的大括号）

也许这是你需要什么？

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

来源

2012-10-12 08:08:30 enhzflep

删除position:absolute

.mouseOver 
{ 
    width:300px; 
    height:300px; 
    z-index:1;  
    box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888; 
}

演示http://jsfiddle.net/aRv2M/2/

来源

2012-10-12 07:13:07 Sowmya

Sowmya感谢您的快速响应，但我不希望图像仅在两个维度上放大。我需要拥有它的位置：绝对。任何其他的想法？：} – user1737587

不能使用悬停？ – Sowmya

试试这个。我希望这个对你有用。

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

使用此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;}

来源

2012-10-12 07:27:53

谢谢阿布尔，我试过这个，但没有解决 – user1737587

用CSS在mouseover上放大图像

回答

相关问题