鼠标悬停。保持课堂直到将鼠标悬停在另一个元素上

MAC 发表于 Dev

苹果

我应该怎么做才能保持类'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;
}

杰夫·科赫

由于您使用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');
    });
});

小提琴演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。