CODEWITHSUNDEEP
javascriptjquery
Mac
Mac

Reputation: 47

onmouseover. keep class until hover another element

What can I do to keep class 'po' untill onmouseover another element from class "Oobj" ? 

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

Sorry..Must've accidently delete html and css.. It was here. Edit: I want to keep class 'po' on each div untill I hover another one and so on..

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

Upvotes: 0

Views: 1485

Answers (3)

user3123529
user3123529

Reputation: 112

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

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

Upvotes: 0

Jeff Koch
Jeff Koch

Reputation: 366

Since you tagged your question with jQuery, I'll assume you're using the library. The good news is this is not difficult! First you need to remove the onmouseover/onmouseout from your tags, and then add this to your file:

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

Upvotes: 2

cocco
cocco

Reputation: 16716

Define a variable witch contains the current selected element and as you hover another element remove the class from current , set current to the new element and add the class.

here is an example but it's not based on your code .. as prieviously it was not visible.

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

Example

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

as you can see in the example there is no need for so many onmouseover,or even id's.

Upvotes: 1

Related Questions