Изменить div фона для div

Мне нужна помощь в создании сценария для моего проекта.Изменить div фона для div

Так выглядит код.

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

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

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

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

мне нужно сделать так, когда парят над DIV с конкретным классом миниатюру, чтобы получить идентификатор миниатюры, каждый ДИВ эскиз будет иметь это идентификатор, и мне нужно, чтобы получить это число.

источник

2015-07-20 ChrisK

Ваше название говорит, что вы хотите одну вещь, и ваш вопрос требует другой вещи. Вы пытаетесь изменить цвет div или получить идентификатор элемента? –

На самом деле, после того, как я получу идентификатор, я собираюсь изменить изображение backgroud div на id. – ChrisK

Знаете ли вы, что вы можете менять фон элементов во время зависания над ними с помощью только css, не так ли? – m69

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

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

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

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

Ваш обработчик события получит объект события. Этот объект будет иметь свойство «target», которое является элементом, вызвавшим событие. Вы можете получить идентификатор из event.target. Я изменил код, чтобы предупредить ID.

источник

2015-07-20 22:35:56 ray

Приятный, но у меня будет несколько элементов, и когда я буду навис над конкретным. – ChrisK

event.target будет конкретным. – ray

Неплохо, спасибо! – ChrisK

Изменить div фона для div

ответ

Смежные вопросы