js写当鼠标悬浮及移开出现背景变化

Posted 2020-08-21 易小川

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js写当鼠标悬浮及移开出现背景变化相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xuanting</title>
<style type="text/css">
#a
{
    background-image:url(image/index-lhd-1-2880x1480.jpg);
    background-size:1000px 500px;
    background-position:center;
    
    width:1000px;
    height:500px;
    border:1px solid #000;
    position:relative;
    top:100px;
    margin:auto;
    overflow:hidden;
    cursor:pointer;
}
/*#a:hover
{
    
    background-size:1200px 600px;
    background-position:center;
    transition:0.7S;
    cursor:pointer;
}*/
#b
{
    width:300px;
    height:25px;
    position:relative;
    top:400px;
    margin:auto;
    font-family:"微软雅黑";
    font-size:18px;
    text-align:center;
    overflow:hidden;
    cursor:pointer;
        }
    

</style>
</head>

<body>
<div id="a" onmouseout="yi()" onmouseover="fu()">
<div id="b" onmouseout="yi()" onmouseover="fu()">
<span>2017雷克萨斯全球设计大奖</span><br />
<span>旨在为新锐设计师们提供机会</span><br /><br />

<span>查看详情&nbsp;&nbsp;&nbsp;></span>
</div>
</div>
</body>
</html>
<script>
function yi()
{
    document.getElementById("a").style.backgroundSize="1000px 500px";
    document.getElementById("a").style.transition="0.7s";
    document.getElementById("b").style.transition="0.7s";
    document.getElementById("b").style.overflow="hidden";
}
function fu()
{
    document.getElementById("a").style.backgroundSize="1200px 600px";
    document.getElementById("a").style.backgroundPosition="center";
    document.getElementById("a").style.transition="0.7s";
    document.getElementById("a").style.cursor="pointer";
    document.getElementById("b").style.transition="2s";
    document.getElementById("b").style.cursor="pointer";
    document.getElementById("b").style.overflow="visible";
}
</script>

以上是关于js写当鼠标悬浮及移开出现背景变化的主要内容，如果未能解决你的问题，请参考以下文章

ccs，js相关的，悬浮按钮，点击产生的虚线框，怎么去掉？

鼠标悬浮DIV上时改变DIV的背景图片和字体颜色，搞清楚是背景图片不是背景颜色，我写的但是报语法错

selenium定位悬浮元素

鼠标悬浮显示文字半透明背景

html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单

vb.net中,如何实现鼠标在listbox控件上移动时,鼠标所到的条目背景变黑、字变白；移开后还原?