Question

当我将鼠标悬停在文本框旁边的小图像上时，我看到了一个图像，但是第二个图像比小图像大，当它反复出现时，左图像会反弹。我希望这两个图像静态显示，第二个图像向下显示而不是反弹第一个。我做了一个jfiddle演示this，这是我的代码：

＆＃13;

    	document.getElementById('imageToHover').onmouseover = function() 
    	{
    		document.getElementById('imageToShow').style.display = 'inline';   
    	}
    
    	document.getElementById('imageToHover').onmouseout = function() 
    	{
    	   document.getElementById('imageToShow').style.display = 'none';   
    	}

＆＃13;

 
    #imageToShow
    {
        display: none;
    }
    #imageToHover
    {
        height= "25" width= "25";
        float: top;
    }

＆＃13;

   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 



<b>blah blah blah?</b>
        <img id="imageToHover" src="https://images-na.ssl-images-amazon.com/images/I/212yolzmnaL._AC_UL160_SR160,160_.jpg" height= "25" width= "25" alt="hover me"/>
        <img id="imageToShow" src="https://media-cdn.tripadvisor.com/media/photo-s/06/8b/50/cb/quality-inn-suites-south.jpg" height= "80" width= "120" alt="image to show"/><br>

        <input type="radio" name="options[]" value="Yes"> Yes<br>
        <input type="radio" name="options[]" value="No"> No<br><br>

＆＃13;

所有我能想到的是使用float right让它神奇地出现在右边，但它只是走到最右边，我尝试在第一张图片上使用float:top，但没有＆＃ 39;做任何事情......我能想到的可能就是有一些div魔法，但每次我使用div它只是添加了新的线条并且不再将它们放在彼此旁边..任何人都可以告诉我如何解决这个问题？

Answer 1

试试这个。刚刚将position: absolute;添加到大图片中。

window.onload = function() {
  document.getElementById('imageToHover').onmouseover = function() {
    document.getElementById('imageToShow').style.display = 'inline';
  }

  document.getElementById('imageToHover').onmouseout = function() {
    document.getElementById('imageToShow').style.display = 'none';
  }
};

#imageToShow {
  display: none;
  position: absolute;
}

#imageToHover {
  height: 25px;
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js">
</script>

<body>



  <b>blah blah blah?</b>
  <img id="imageToHover" src="https://images-na.ssl-images-amazon.com/images/I/212yolzmnaL._AC_UL160_SR160,160_.jpg" height="25" width="25" alt="hover me" />
  <img id="imageToShow" src="https://media-cdn.tripadvisor.com/media/photo-s/06/8b/50/cb/quality-inn-suites-south.jpg" height="80" width="120" alt="image to show" /><br>

  <input type="radio" name="options[]" value="Yes"> Yes<br>
  <input type="radio" name="options[]" value="No"> No<br><br>
</body>

如何使鼠标悬停图像显示在无线电选择旁边，没有错误的弹跳效果

1 个答案: