鼠标悬停时更改背景图像[重复]

Posted 2023-03-05

【中文标题】鼠标悬停时更改背景图像[重复]

【英文标题】：changing background image when onmouseover [duplicate]

【发布时间】：2018-07-07 18:34:34

【问题描述】：

function change(ele) 
  document.getElementById('info').innerhtml = ele.alt;
  document.getElementById('info').style.backgroundImage = "url(ele.src)";

<div id='info'>
  This will tell you more about the below image
</div>
<div id='container'>
  <div>
    <img  src="img\barbarian-thumb.jpg" class="pics" onmouseover="change(this)">
  </div>
</div>

我如何用鼠标悬停在 div 标签中的 id 为 conatiner 的图像更改带有 id 信息的 div 的背景图像

【参考方案1】：

只需为您的图像标签分配一个 id 并像这样更改图像 src。

function mouseOverImage() 
  document.getElementById("img").src = "images/foo.png";


<img  
  id="img" 
  
  src="images/blue.png" 
  onmouseover = "mouseOverImage()"
/> 

【讨论】：

OP 正在获取元素。这不是问题

【参考方案2】：

请看这个。基本上你可以绑定函数与 html 内联。或者您可以动态绑定它。这是非常简单的解决方案。如果你的图片路径是固定的。

<script type="text/javascript">
function mouseaway(my_image) 
    my_image.src = "someimage.jpg";


function rollover(my_image) 
    my_image.src = "someimage2.jpg";

</script>

<img src="someimage3.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)" />

【参考方案3】：

希望对你有帮助

 $(document).ready(function()
       $("img").hover(function()
            $(this).attr('src', 'images/alt/imagename.jpg');
       );
    );

【参考方案4】：

试试这个：

function change(e)
  document.getElementById("info").style.backgroundImage = "url('"+e.src+"')";
  document.getElementById("info").style.backgroundRepeat="no-repeat";

function change2(e)
  document.getElementById("info").style.backgroundImage = "";

#info
height:100px;

<div id='info'>
     This will tell you more about the below image
     </div>
 <div id='container'>
     <div>
      <img  src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1614068cdea%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1614068cdea%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" class="pics" onmouseover="change(this)" onmouseout="change2(this)">
     </div>
 </div>

【讨论】：

通常使用 ele.src 代替 ele.getAttribute('src')

没错。谢谢