Question

我有一个小问题，我发誓应该工作......这有点像一个愚蠢的问题......但这里是...... 我想要一个我创建的div作为一个按钮...当我点击它时，我怎么也不想改变它的背景（给出一个按钮的效果）这是我的代码：

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <style>
 #button1 {
     width:100px;
     height:50px;
     background-image:url(normalbutton.jpg)
 }
 </style>
 </head>

 <body class="asd">
 <div id="container">
 <a href="#">
 <div id="button1" onmousedown="document.getElementById("button1").style.backgroundImage='url(onmousedownbutton.jpg)'"></div></a>

 </body>
 </html>

Answer 1

我认为使用jQuery很容易：

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(1.jpg)'}) 
});

Answer 2

您在双引号内使用双引号。将 button1 周围的引号更改为单引号，如下所示： <div id="button1" onmousedown="document.getElementById('button1').style.backgroundImage='url(onmousedownbutton.jpg)'"></div>

补充说明：

您的<div id="container">未关闭
您无法在<div>

<a>

Answer 3

只需使用css：

HTML

<html> 
<body class="asd">
 <div id="container">
   <a href="#">
     <div id="button1" ></div>
   </a>
  </div>
 </body> 
 </html>

CSS

#button1 {width:500px;height:500px;background:red}
#button1:hover {background:green;}
#button1:active {background:grey;}

Answer 4

像这样改变鼠标

 <a href="#">
 <div id="button1" onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">Button
</div>
</a>

LiveDemo

onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">

我使用了谷歌的一些图片，它们看起来很适合一些自定义图像。：）

Answer 5

您也可以尝试使用css：

#button1:focus {
  background: url(onmousedownbutton.jpg);
}

或

#button1:active{
  background: url(onmousedownbutton.jpg);
}

Answer 6

根据Bushan的回答，当按住鼠标时，这将切换到下滑图像，并在释放鼠标按钮时恢复为原始图像。

如果你赞成这个答案，请同时支持Bushan的回答。

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(image2.jpg)'}) 
}).mousedown(function(){
    $(this).css({'background-image': 'url(image1.jpg)'}) 
});

HTML：

<div id="button1" style="background-image:url('image1.jpg');"></div>

来源/参考文献：

CSS background-image - What is the correct usage?

在鼠标按下时更改背景图像

6 个答案: