Question

我可以做些什么来保持班级'po'直到从“Oobj”班级的另一个元素上来？

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

抱歉..一定会意外删除html和css ..就在这里。编辑：我想在每个div上保持'po'级别，直到我还在另一个上面等等......

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;
}

Answer 1

由于您使用jQuery标记了您的问题，我假设您正在使用该库。好消息是这并不困难！首先，您需要从标签中删除onmouseover / onmouseout，然后将其添加到您的文件中：

$(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

Answer 2

定义包含当前所选元素的变量当你悬停另一个元素时，从当前删除该类，将current设置为新元素并添加该类。

这是一个示例，但它不是基于您的代码..因为它显然不可见。

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 ../ / p>

Answer 3

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

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

的onmouseover。保持等级直到悬停另一个元素

3 个答案: