更改div背景當onmouseover另一個div

我有DIV1，當用戶onmouserover它，我想改變DIV2（網頁的不同部分）的背景，請問該怎麼做？而當用戶上傳DIV1時，則DIV2應該恢復到之前的狀態。更改div背景當onmouseover另一個div

謝謝。

2012-02-27 Martin Dee

您是使用jQuery還是隻是常規的JavaScript？ – 2012-02-27 21:47:59

您是否嘗試過Google？發佈前請閱讀常見問題解答。 – DarthJDG 2012-02-27 21:50:53

你可以通過ul＆li做到這一點，只有在沒有javascript的情況下才能做到這一點 – Mhmd 2012-02-27 21:56:33

您也可以使用CSS和常規兄弟選擇器（~）或其他選擇器的某種組合來指定要更改的div。

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

或

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

Demo

來源

2012-02-27 21:50:48 bookcasey

我喜歡這樣。沒有JavaScript。 – 2012-02-27 21:55:38

油滑的CSS。我喜歡！ – 2012-02-27 21:56:53

如果接受使用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上mouseover改變的另一div CSS屬性。

來源

2012-02-27 21:54:37

嗨，任何想法我在做什麼錯在這裏：www.gemiusinfo.cz/222index.html？：/ – 2012-02-28 09:30:47

我會建議把它放在一個匿名的自動執行功能的末尾。 '（function（）{//你的代碼在這裏}）（）'。 – 2012-02-28 14:20:53

此外，@ bookcasey的解決方案更簡單，更快捷，並且支持IE7 +和'CSS'中的〜sibling選擇器; '.one：hover〜.two {background：salmon;}' – 2012-02-28 14:22:27

讓我們說你有這個網站

<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

回答

相關問題