鼠标悬停时更改背景图像 [英] change background image when mouse over

问题描述

我对 HTML5 有要求.

I have a requirement in HTML5.

新闻、商业、人物和品牌是 4 张图片，我将所有图片都添加到了背景图片中.当我将鼠标悬停在新闻图像上时，背景图像应更改，鼠标移出应显示旧背景图像.我不知道在鼠标悬停功能上写什么.

News,Business,People and Branding are 4 images and i added all into the background image. When i mouse hover on the News image, Background image should change and mouseout should show old background image. I dont know what to writen on the mouseover function.

请检查代码并让我知道需要更改的地方.
内网申请

please check the code and let me know where changes are required.
Intranet Application

<style>     
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        padding-top: 0px;
        padding-bottom: 0px;
        }

    #BG {
        background-image: url('img/asianwoman.jpg');
        width: 100%;
        height: 100%;
        min-height: 100%;
        min-width: 100%;
        background-size: 100% 100%;                             
    }

</style>

<script type="text/JavaScript">

    function mouseOverFunction(){

    }

    function mouseOutFunction(){            

    }       
</script>   

推荐答案

如果要求一个元素影响另一个元素的背景，则需要 JS.假设 id="news" 是触发元素，id="BG" 是接收元素:

If the requirement is that one element affects the background of another, you will require JS. Assuming id="news" is the triggering element and id="BG" is the receiving element:

document.getElementById("news").addEventListener("mouseover", function() {
  document.getElementById("BG").style.backgroundImage = "url(img/southamericangrandmother.jpg)";
}, false);
document.getElementById("news").addEventListener("mouseout", function() {
   document.getElementById("BG").style.backgroundImage = "";
}, false);

这篇关于鼠标悬停时更改背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！