鼠标经过按钮变换背景图片，同时出现下拉框（鼠标移到下拉框上面，按钮颜色仍然是蓝色）用javascript实现

发布网友发布时间：2022-05-18 06:09

共5个回答

热心网友时间：2022-05-18 07:39

onmouseover执行函数,在该盒子内部生成一个下拉框，绝对定位，此盒子相对定位，下拉框悬浮在此盒子下面。追问我需要完整的代码，你那边还有啊

追答<div id="show" style="position:relative;width:100px;height:100px;background:#f00">点我</div>
var show = document.getElementById("show");
var select=document.createElement("div");
select.id="select";
select.style.width="100px";
select.style.height="100px";
select.innerHTML=111111;
select.style.position="absolute";
select.style.top="100px";
select.style.backgroundColor="#ff0";
select.style.position="absolute";
show.onmouseover=function(){
if(document.getElementById("select")==null){
show.appendChild(select);
}
this.style.backgroundColor="#000";
this.onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
背景改成背景图片就成

热心网友时间：2022-05-18 08:57

我路过，来学东西的，教教我把追问我只是问他们现成的代码，我自己基本不会，你要学习还是去网上搜专业的教程吧

热心网友时间：2022-05-18 10:31

我有，你QQ我1597891412

热心网友时间：2022-05-18 12:23

到底是背景颜色还是背景图片？？追问背景图片，按钮的背景就是用的图片

追答<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
">
<html xmlns="
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function move1(){
var ia=document.getElementById("Text");
var ib=document.getElementById("table1");
ia.style.backgroundImage="url(2.png)";
ib.style.display="block";
}
</script>
<style type="text/css">
#table1 {
height: 60px;
border: 2px solid #30C;
display: none;
}
#Text {
height: 80px;
width: 80px;
background-repeat: no-repeat;
}
</style>
</head>
<input id="Text" name="Text" type="button" value="Text" onmouseover="move1()" />
<body>
<table width="100" border="0" cellspacing="0" cellpadding="0" id="table1">
  <tr>
    <td> </td>
  </tr>
</table>
</body>
</html>