如何避免图像在鼠标悬停时移动 [英] How to avoid an image to move on mouse hover
本文介绍了如何避免图像在鼠标悬停时移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨！我不希望div内的图像移动鼠标悬停....
这是我正在使用的代码，但它正在鼠标悬停上移动图像，如何避免这种情况？
Hi! I dont want image inside a div to move on mouse hover....
This is the code I am using but it is moving the image on mouse hover,how to avoid that?
<style type="text/css">
.image {
position: relative;
width: 154px;
height: 200px;
}
.image img {
max-width: 150px;
max-height: 150px;
margin-left:100px;
margin-right:100px;
margin-top:100px;
position: relative;
}
.hoverimage {
position: absolute;
top: 120px;
left: 0;
display: none;
}
.wrapper:hover .hoverimage {
display: block;
position:absolute;
margin-left:123px;
width:100px;
}
.main-wrapper:hover {
border: 2px solid #7c97b4;
width:auto;
height:auto;
display:block;
width:300px;
height:300px;
}
.main-wrapper {
border-radius: 5px 5px 5px 5px;
float: left;
height: auto;
margin-right: 1px !important;
padding: 6px;
position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="main-wrapper">
<div class="wrapper">
<div class="image">
<img src="../Images/BlakeLively.jpg" alt="" />
<a href="../Default.aspx">
<img class="hoverimage" src="../Images/buy-button.jpg" alt="" /></a>
</div>
</div>
</div>
</form>
推荐答案
这里有几个问题：
1.你有一个包装div在main-wrapper div中，但它的类未在样式声明中声明。
2.您的图像类的宽度为154px，但容器类（.wrapper：hover .hoverimage）的宽度为100px
3.你没有有主要包装的边框，但鼠标悬停你正在添加边框。显然它会占用空间并移动内容。一种解决方法是为其添加边框并在鼠标上更改其颜色或将其边框颜色设置为背景颜色（可能是白色）。
我更改了你的代码和检查，它对我有用。你也试试这个。但请记住，我使用了我的图像。我不知道你的图像的高度和宽度是多少，所以根据你的要求改变div的高度和宽度。
Here are few problems:
1. You have a wrapper div inside main-wrapper div, but its class is not declared in style declaration.
2. Your image class has width 154px but the container class(.wrapper:hover .hoverimage ) has width of 100px
3. You don't have border for main-wrapper, but on mouse over you are adding border. Obviously it will take space and move the contents. One workaround is to add a border to it and change its color on mouse over or set its border color to the color of background(may be white).
I changed your code and checked, it worked for me. You also try this. But keep in mind, I used my images. I don't know what is the height and width of your images so change height and width of div's as per your requirement.
<style type="text/css">
.image
{
position: relative;
width: 154px;
height: 200px;
float: right;
}
.hoverimage
{
position: absolute;
top: 120px;
left: 0;
display: none;
}
.wrapper
{
position: relative;
margin-left: 123px;
width: 160px;
float: left;
}
.main-wrapper:hover
{
border: 2px solid #7c97b4;
padding: 6px;
}
.main-wrapper
{
border-radius: 5px, 5px, 5px, 5px;
float: left;
height: auto;
margin-right: 1px !important;
padding: 6px;
position: absolute;
border: 2px solid Gray;
}
</style>
<form id="form1" runat="server">
<div class="main-wrapper">
<div class="wrapper">
<div class="image">
<img src="images/template10.jpg" alt="" />
<a href="Default.aspx">
<img class="hoverimage" src="images/check48.png" alt="" /></a>
</div>
</div>
</div>
</form>
通常情况下，鼠标悬停时没有任何动态。如果它移动，则意味着您添加了一些代码来移动它。如果您不需要动作，请删除该代码。 :-)
-SA
Normally, nothing really moves on mouse hover. If it moves, it means that you have added some code to move it. Remove that code if you don't need motion. :-)
—SA
这篇关于如何避免图像在鼠标悬停时移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
