如何使用JavaScript更改背景图像ondragenter或ondragover

Question

我有一个参加ondragenter事件的div。 当鼠标进入div时，我希望背景更改为特定图像，但是直到我按下鼠标键，图像才会改变。

如果我尝试更改为背景色，效果很好！ 我也尝试过用背景图像更改css类，并且它可以工作，但是在我的情况下，我不能这样做，因为我不知道从css中显示哪个图像。

的HTML

<div id="test" ondrop="drop(event)" ondragenter="enter(event)"></div>

的JavaScript

function enter(event) {
    $('#test').css('background', '#333 url("test.png")');
    event.preventDefault();
}

在我的代码示例中，当鼠标进入时，div将获得颜色＃333，而当我让鼠标按钮向上时，div将获得背景图像。

我正在基于Webkit的Spotify中开发此程序。 有谁知道如何解决这个问题？

谢谢！

Answer 1

在http://musicmachinery.com/2011/12/02/building-a-spotify-app/上 ，它显示：

开发Spotify应用程序就像开发现代HTML5应用程序一样。 您有一个丰富的工具包：CSS，HTML和Javascript。 您可以使用jQuery，也可以使用许多Javascript库。 您的应用程序可以连接到The Echo Nest之类的第三方网络服务。 Spotify应用程序几乎支持您的Chrome浏览器支持的所有功能，但有一些例外：没有网络音频，没有视频，没有地理位置和没有Flash（谢天谢地）。

话虽如此，我建议您使用Jquery。 不仅简单易学，而且您可以访问JQuery UI（请访问http://jqueryui.com/demos/进行演示）。

至于您的拖入/放出问题，我已经为您提供了一个使用jquery的示例。 该演示可以在此处或http://jsfiddle.net/H8fPL/12/上找到。 我还提供了下面使用的代码。 需要帮助请叫我！ 编码愉快！

CSS：

div{
 width:200px;
 height:220px;
 border:1px solid black;    
}

#div1{
 background-color:orange;
 margin-left:20px;
}

.NC{
 background:url("http://www.dreadcentral.com/img/news/jun11/niccage.jpg") no-repeat;   
}

.surprised{
background:url('http://rlv.zcache.ca/smiley_oh_sticker-p217194901605792400envb3_400.jpg');
background-size:80px 60px;
background-repeat:no-repeat;
background-position:center;
}

JAVASCRIPT：

//needed for jquery, 
//CALL THIS SCRIPT BEFORE USING $ syntax
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
//query UI script
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

HTML：

<div id='div1'>
Come Hither...
</div>

<div id="dropme">
DRAG ME OVER AND WATCH ME CHANGE
</div>

重要参考：

• http://docs.jquery.com/Main_Page （很明显）
• http://jqueryui.com/demos/（UI DEMOS）
• http://jqueryui.com/demos/droppable/ （基本方法/方法/选项！）
• http://jqueryui.com/demos/draggable/#event-drag （方法/事件/基本选项！）
• http://oscarotero.com/jquery/（jquery速查表）