Question

<!doctype html>

<html>
<head>
    <style type="text/css"> 
     #rightbar a:hover img
    {
      border:1px solid #5cadff;
      text-decoration:none;
    }

    #rightbar  img
   {  
     padding:20px 58px; 
     }

    </style>
</head>
<body>
<div id="rightbar">
                <h3>MultiMedia</h3><br/>
                <a href="#"><img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"></a> <br/>
                <a href="#"><img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"></a> <br/>
                <a href="#"><img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"></a> <br/>
                <a href="#"><img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"></a> <br/>

        </div>

当我将鼠标悬停在图片上时，我不希望图像悬垂？如何摆脱它，我希望图像在我hovero结束时仍然是。

Answer 1

可能是边境造成的。试试这个：

var jsonObj = {};

var sampleArray = [
    "logo",
    "Details",
    "titles"
];

for (var i = 0, len = sampleArray.length; i < len; i++) {
    jsonObj['position' + (i + 1)] = sampleArray[i];
}

console.log(jsonObj);

Answer 2

可能你的视觉悬挂是由悬停时添加的边框引起的，它会在图像周围增加1px。您可以通过将border:1px solid transparent添加到#rightbar img

来解决此问题

这将解决您的问题

Answer 3

您在悬停时添加边框，因此会发生闪烁。尝试用这个替换..

 #rightbar img
   {  
     padding:20px 58px; 
     border:1px solid transparent;
   }

这是FIDDLE.

Answer 4

设置1 px边框时，它会向右移动1px以为边框腾出空间。因此，您可以在悬停操作中减少1px的保证金。

 #rightbar a:hover img{
  border:1px solid #5cadff;
  text-decoration:none;
  margin-left: -1px;
}

当我徘徊在图像上时，它们有点晃来晃去？

4 个答案: