Forums
View unanswered posts | View active topics It is currently Fri Dec 15, 2017 2:07 am



Reply to topic  [ 1 post ] 
 changing className works once but no more 
Author Message

Joined: Thu Apr 07, 2011 3:12 am
Posts: 1
Post changing className works once but no more
Hello,

First, please forgive my english.
I try something quite simple : changing the className of div elements on the mouseover/mouseout events.
The context is as follows :
- I use jQuery
- I have one div surrounding my content, resized to match the window size and scrolling functions managed by a jQuery plugin I made, it results on the adding of another div element, between the first div and the content, which will have its top value changed by jQuery.
- The content is a list of divs, here is the css
Code:
.article, .article-over {
   overflow:hidden;
   font-size:12px;
   border:1px solid #ddd;
   float:left;
   width:192px;
   margin:0 10px 10px 0;
   padding:8px;
   position:relative;
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   border-radius:8px;
   -khtml-border-radius:8px;
}
.article-over {
   border:1px solid #555;
   background-color:#909093;
   -webkit-box-shadow: #000 0px 0px 5px;
   -khtml-box-shadow: #000 0px 0px 5px;
   -moz-box-shadow: #000 0px 0px 5px;
   box-shadow: #000 0px 0px 5px;
   color:#fff;
}

Each div begin with the className "article", in order to prevent multi-class support I prefer changing the className than adding one.
And, as I use the same base styles on other classed elements, I have this hover handler
Code:
$('.article, .someotherclass').hover(function(){
   $(this).attr('class', $(this).attr('class')+'-over');
},function(){
   $(this).attr('class', $(this).attr('class').replace('-over',''));
});

With IE, whatever the version, the style is well changed, but only the first time I place the cursor over then out the div, after this, the style remain the .article one. One more little thing: the first div style doesn't change at all !

I tried manage the hover effect with
Code:
onmouseover="this.className='article-over'" onmouseout="this.className='article'"

Result is absolutely different but I can't say it is good : the floating is breaking and the -over style is blinking during about one second before stabilization

My solution is to set css properties directly in the jQuery hover handler
Code:
$('.article, .thumbunselected, .thumbselected, .miniunselected, .miniselected, .listunselected, .listselected').hover(function(){
   $(this).css({
      'border':'1px solid #555',
      'background-color':'#909093',
      '-webkit-box-shadow': '#000 0px 0px 5px',
      '-khtml-box-shadow': '#000 0px 0px 5px',
      '-moz-box-shadow': '#000 0px 0px 5px',
      'box-shadow': '#000 0px 0px 5px',
      'color':'#fff'
   });
},function(){
   $(this).css({
      'border':'1px solid #ddd',
      'background-color':'#fff',
      '-webkit-box-shadow': '#fff 0px 0px 0px',
      '-khtml-box-shadow': '#fff 0px 0px 0px',
      '-moz-box-shadow': '#fff 0px 0px 0px',
      'box-shadow': '#fff 0px 0px 0px',
      'color':'#000'
   });
});

... but it is at the opposite of the purpose of PIE : making css3 working with only css code.

Thank you for your help and sorry if the answer had already be given in another topic.

Ecker


Thu Apr 07, 2011 4:05 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: Google [Bot] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.