Изменить фон div, когда onmouseover еще один div

У меня есть DIV1, и когда пользователь его работает, я хочу изменить фон DIV2 (другая часть веб-страницы), как это сделать, пожалуйста? И когда пользователь onmouseout DIV1, тогда DIV2 должен вернуться, как было раньше.Изменить фон div, когда onmouseover еще один div

Спасибо.

источник

2012-02-27 Martin Dee

Вы используете jQuery или просто обычный javascript? –

Вы пробовали Google? Пожалуйста, прочтите FAQ перед публикацией. – DarthJDG

вы можете сделать это по ul & li и только с css без javascript – Mhmd

Вы можете в качестве альтернативы сделать это с помощью CSS и общего селектора (~) или некоторой комбинации других селекторов, чтобы указать div, который вы хотите изменить.

.one:hover ~ .two {background:salmon;}

или

.one:hover ~ ul .three {background: lightblue;}

Demo

источник

2012-02-27 21:50:48 bookcasey

Мне это нравится. Нет javascript. –

Slick css. Мне нравится! –

Если вы согласны с помощью JQuery, это будет что-то вроде этого:

var bgcolor; 
$("#id_of_first_div").hover(function(){ 
     bgcolor = $("#id_of_div_2").css('backgroundColor'); 
     $("#id_of_div_2").css('backgroundColor', '#ffcc00'); 
    }, 
    function(){ 
     $("#id_of_div_2").css('backgroundColor', bgcolor); 
});

источник

2012-02-27 21:51:16

Вот как связать события мыши в чисто JavaScript ,

document.getElementById('XYZ').onmouseover = function(){ 
    //Do stuff here 
}

Вот jsfiddle из div изменения CSS свойство другого div на mouseover.

источник

2012-02-27 21:54:37

Привет, любая идея, что я делаю неправильно здесь: www.gemiusinfo.cz/222index.html? :/ –

Я бы предложил поместить его в анонимную функцию автоматического выполнения в конце вашего документа 'HTML'. '(function() {// Ваш код здесь})()'. –

Кроме того, решение @ bookcasey проще, быстрее и поддерживает IE7 + с селектором ~ sibling в 'CSS'; '.one: hover ~ .two {background: salmon;}' –

скажем, у вас есть этот HTML

<div class="div1"></div> 
<div class="div2"></div>

И это CSS:

.div2 { 
    background: #FFF url(/path/to/mouseOUTImage) top left no-repeat; 
} 
.div2MouseOver { 
    background: #FFF url(/path/to/mouseOVERImage) top left no-repeat; 
}

Затем с помощью JQuery вы можете сделать:

$('.div1') 
.mouseenter(function() { 
    $('.div2').addClass('div2MouseOver'); 
}) 
. mouseleave(function() { 
    $('.div2').removeClass('div2MouseOver'); 
});

источник

2012-02-27 21:57:17 koenpeters

Я пытался использовать обычный JS для реализации что вам нужно,

DEMO

(function() { 

    //change the value of div1 with your first div box 
    var div1 = document.getElementById('div1'); 
    var div2 = document.getElementById('div2'); 
    var defBC = div2.style.backgroundColor; 

    addEventHandler(div1, 'mouseover', function() { 
     div2.style.backgroundColor= 'black'; 
    }); 

    addEventHandler(div1, 'mouseout', function() { 
     div2.style.backgroundColor= defBC; 
    }); 


    function addEventHandler(el, eType, handler) { 
     if (el.addEventListener) { // W3C, FF 
      el.addEventListener(eType, handler, false); 
     } else if (el.attachEvent) { // IE 
      el.attachEvent('on' + eType, function() { 
       handler.call(el); 
      }); 
     } 
    } 

})();

источник

2012-02-27 21:57:19

Изменить фон div, когда onmouseover еще один div

ответ

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