0

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

6 回答 6

2

我认为使用 jQuery 会很容易：

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(1.jpg)'}) 
});
于 2013-10-25T08:28:23.440 回答
1

只需使用 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;}
于 2013-10-25T08:22:12.603 回答
1

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

进一步说明：

  • 你<div id="container">的没有关闭
  • 你不能<div>在里面使用<a>
于 2013-10-25T08:18:00.170 回答
0

基于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 - 正确的用法是什么？

于 2014-02-16T22:35:55.080 回答
0

像这样向下更改鼠标

 <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>

现场演示

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

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

于 2013-10-25T08:18:45.567 回答
0

你也可以试试css：

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

或者

#button1:active{
  background: url(onmousedownbutton.jpg);
}
于 2013-10-25T08:20:02.097 回答