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

【问题标题】：changing the background image on mouse down在鼠标按下时更改背景图像
【发布时间】：2013-11-04 06:10:39
【问题描述】：

我有一个小问题，我发誓应该工作......这似乎是一个愚蠢的问题......但在这里...... 我想要一个我创建的 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>

【问题讨论】：

1) 你不应该放置内联 javascript。 2) 您可以在函数中使用 this 关键字来引用您的项目。 3）可能是你的图片路径不好...先检查一下
4)，您的 HTML 无效。您在" 中使用"，这可能会给您带来错误。 ("document.getElementById("button1")...")
谢谢...我想尽量避免创建一些脚本..无论如何..谢谢:)
正如@Bartdude 所说，内联js是你的问题。检查这个小提琴：jsfiddle.net/CcKM4 看看如何让它发挥作用。

标签： css image html background

【解决方案1】：

我认为使用 jQuery 会很容易：

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

【讨论】：

【解决方案2】：

只需使用 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;}

【讨论】：

【解决方案3】：

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

补充说明：

您的<div id="container"> 未关闭
您不能在<a> 内部使用<div>

【讨论】：

【解决方案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)'">

我使用了一些来自 Google 的图片，使用一些自定义图片会很好看。 :)

【讨论】：

【解决方案5】：

你也可以试试css：

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

或

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

【讨论】：

【解决方案6】：

基于Bushan的回答，当鼠标按住时，这将切换到downclick图像，并在释放鼠标按钮时恢复到原始图像。

$("#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?

【讨论】：