onmouseover。繼續上課，直到懸停另一個元素

我可以做些什麼來保持類'po'直到onmouseover類「Oobj」的另一個元素？onmouseover。繼續上課，直到懸停另一個元素

<div class="Oobj" id="Oobj51"> 
    <div class="przed" onmouseover="this.className='po' 
    "onmouseout="this.className='przed'"/>sport 
    </div> 
    </div>

對不起。必須意外刪除html和css ..就在這裏。編輯：我想保留類 'PO' 每個div的，直到我將鼠標懸停另一個等..

HTML：

<div class="Oobj" id="Oobj51"> 
<div class="przed" onmouseover="this.className='po'" 

onmouseout="this.className='po'"/>sport 
</div></div> 


<div class="Oobj" id="Oobj52"> 
<div class="przed" onmouseover="this.className='po'" 

onmouseout="this.className='przed'"/>rozrywka 
</div></div> 

<div class="Oobj" id="Oobj53"> 
<div class="przed" onmouseover="this.className='po'" 

onmouseout="this.className='przed'"/>kultura 
</div></div> 

<div class="Oobj" id="Oobj54"> 
<div class="przed" onmouseover="this.className='po'" 

onmouseout="this.className='przed'"/>ogólne 
</div></div> 

<div class="Oobj" id="Oobj55"> 
<div class="przed" onmouseover="this.className='po'" 

onmouseout="this.className='przed'"/>muzyka 
</div></div>

CSS：

.przed{ 
    width: 84px; 
    height: 84px; 
    background: #4b8eb5; 
    -moz-border-radius: 70px; 
    -webkit-border-radius: 70px; 
    border-radius: 70px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 18px; 
    color: #262626; 
    text-align: center; 
    line-height: 84px; 
    -moz-box-shadow: 1px 1px 2px #888; 
    -webkit-box-shadow: 1px 1px 2px #888; 
    box-shadow: 1px 1px 2px #888;  
} 

.po{ 
width: 84px; 
    height: 84px; 
    background: #262626; 
    -moz-border-radius: 70px; 
    -webkit-border-radius: 70px; 
    border-radius: 70px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 18px; 
    color: #cbe9eb; 
    text-align: center; 
    line-height: 84px; 
    -moz-box-shadow: 1px 1px 2px #888; 
    -webkit-box-shadow: 1px 1px 2px #888; 
    box-shadow: 1px 1px 2px #888; 
}

來源

2013-12-20 Mac

這還不夠！解釋更多並向我們展示您的'html'代碼 –

刪除'onmouseout'處理程序並向'mouseover'添加代碼，該代碼會在添加到當前元素之前從所有其他元素中刪除類。 –

你不能在鼠標外面（對於這個元素）做任何事情，並且通過元素編碼來爲其自身添加「po」類，並從其他元素中刪除所有其他類。是否有意義？ – ochi

既然你標記你的問題與jQuery，我會假設你正在使用庫。好消息是這並不難！首先，你需要從你的標籤/的onmouseout刪除的onmouseover，然後添加到您的文件：

$(document).ready(function() { 
    $('.przed').mouseenter(function() { 
     // remove any existing 'po' classes and add the 'przed' class back 
     $('.po').removeClass('po').addClass('przed'); 
     // for the element just hovered over, remove the 'przed' class and add 'po' 
     $(this).removeClass('przed').addClass('po'); 
    }); 
});

Fiddle Demo

來源

2013-12-20 16:36:39

如JSFiddle [here]（http://jsfiddle.net/BZ8DY/1/）中所示 –

添加小提琴演示，下次添加它們 – Satpal

感謝您的建議Satpal，我是這個網站的新手。我在添加編輯到我的文章的同時添加了一條評論。 –

定義一個變量女巫包含當前所選元素和你懸停另一個元素中刪除從當前的類，設置當前的新元素並添加類。

這裏是一個例子，但它不是基於你的代碼..作爲prieviously它是不可見的。

function select(e){ 
if(e.target.parentNode==this){ 
    if(current){current.className=''} 
    current=e.target; 
    current.className='selected' 
} 
} 
var a=document.getElementById('Oobj51'),current; 
a.addEventListener('mouseover',select,false);

例

http://jsfiddle.net/aZtVg/1/

，你可以看到的例子就不需要這麼多的onmouseover，甚至ID的。

來源

2013-12-20 16:40:30 cocco

$(document).ready(function() { 
    $('.przed').mouseover(function() { 
     $(this).addClass("po").removeClass("przed"); 
    }); 

    $('.po').mouseout(function() { 
     $(this).addClass("przed").removeClass("po"); 
    }); 
});

來源

2013-12-20 17:00:36 user3123529

請添加一些英文，以澄清你的答案。 – hgwhittle

onmouseover。繼續上課，直到懸停另一個元素

回答

相關問題