更改 div 特定于 div 的背景

Question

我需要帮助为我的项目制作脚本。

代码是这样的。

var thumbnails = document.getElementsByClassName("thumbnail");
var thumbnails_lenght = thumbnails.length;

for(var i=0; i<thumbnails_lenght; i++) {
 thumbnails[i].onmouseover = function() {
  //The problem part
 };
 thumbnails[i].onmouseout = function(){
  
 };
}

*{
 margin: 0 auto;
 font-family: sans-serif;
}
.item{
 width: 240px;
 height: 240px;
 margin: 5px;
 background: #EEE;
}
.thumbnail{
 width: 240px;
 height: 200px;
 background: #DDD;
}
.description{
 width: 240px;
 height: 40px;
 line-height: 20px;
 text-align: center;
 font-size: 14px;
}

<div class="item">
 <div class="thumbnail" id="1"></div>
 <div class="description">test</div>
</div>

我需要做到这一点，当将鼠标悬停在 div 上并带有特定 class 缩略图以获取缩略图的 ID 时，每个缩略图 div 都会有它的 ID，我需要得到那个号码。

Answer 1

var thumbnails = document.getElementsByClassName("thumbnail");
var thumbnails_lenght = thumbnails.length;

for(var i=0; i<thumbnails_lenght; i++) {
 thumbnails[i].onmouseover = function(event) {
  // You can get the id from the event passed to the handler:
        alert('The id is: ' + event.target.id);
 };
 thumbnails[i].onmouseout = function(){
  
 };
}

*{
 margin: 0 auto;
 font-family: sans-serif;
}
.item{
 width: 240px;
 height: 240px;
 margin: 5px;
 background: #EEE;
  float: left;
}
.thumbnail{
 width: 240px;
 height: 200px;
 background: #DDD;
}
.description{
 width: 240px;
 height: 40px;
 line-height: 20px;
 text-align: center;
 font-size: 14px;
}

<div class="item">
 <div class="thumbnail" id="1"></div>
 <div class="description">test 1</div>
</div>
<div class="item">
 <div class="thumbnail" id="2"></div>
 <div class="description">test 2</div>
</div>
<div class="item">
 <div class="thumbnail" id="3"></div>
 <div class="description">test 3</div>
</div>

您的事件处理程序将接收一个事件对象。该对象将有一个 "target" 属性这是触发事件的元素。您可以从 event.target 获取 ID。我已修改您的代码以提醒 ID。

更改 div 特定于 div 的背景

Change div background specific for the div

javascript

background-image

onmouseover