tags:

views:

195

answers:

3

I am using jquery addClass code to show/hide elements when rolling over a div. in all browsers it works but in IE it only works when i rollover some text, not the full div.

so in this example, if I rollover the showingtext section of the main div, the hiddentext div will show. but if I mouse into the space in between the two floating divs (where there is now text or anything), the hover doesnt work.

UPDATE: the code below seems to work, but my production code does not. Please refer to this link: jsfiddle.net/H2anm/5 There are some broken images and such, but if you roll your mouse over the element into the whitespace to the right of the usernames, the location coordinates and the Pref.brand: Gamehouse.. or some of the surrounding whitespace of the Share/Bookmark links, the div collapses and the buttons/bgcolor change disappear.

javascript:

$(function() {
$("div.DivThatsTriggeredOnRollover").hover( 
function() {  $("div.hiddentext").addClass("hiddentextShow"); },
function() { $("div.hiddentext").removeClass("hiddentextShow"); });
});

pseudo-html code:

<div class="DivThatsTriggeredOnRollover" style="width:500px;">

<div id="showingtext" style="float:left;width:100px;">
here is showing text
</div>

<div class="hiddentext" style="float:right;width:100px;">
here is hidden text
</div>

</div>
+2  A: 

Actually, everything works as expected (tested in IE6-7-8):

http://jsfiddle.net/ZDyyU/

If you mouse over anything inside the .DivThatsTriggeredOnRollover, the .hiddentext will show and hide when you mouse out. .showingtext plays no part in this whatsoever, it's just there.

dalbaeb
WOW thats a great tool. Ive updated with the production code. can i set this tool to act as IE/FF or any other browser? or do i have to use it in that specific browser?does this work for you still in IE. http://jsfiddle.net/H2anm/1/
JiminyCricket
Well, whatever browser you open it in, you'll see how it behaves in it. And yes, your prod code works for me in IE6-7-8: the "share bookmark" shows up as soon as you mouse over the container.
dalbaeb
please see updates. does it work when you rollover the specified spaces above (right of the username/coordinates/pref.brand) or when you rollover the whitespace surrounding the Share/Bookmark buttons?
JiminyCricket
I'm sorry, but you don't expect people here to debug your production code, do you? Your JS code works fine, I've demonstrated it with an example. Now you just have to figure out which part of your markup screws things up (remove one tag -> refresh -> check -> repeat) and work on fixing the issue.
dalbaeb
+1  A: 

your code seemed to be perfect. don't know what is going wrong

http://jsbin.com/udaqi4

Ninja Dude
thanks, my example works, but not my production code. please see update above, i included a link
JiminyCricket
A: 

turns out that in IE7 if you have multiple floats inside of a larger div and you specify a width in one of the inner floating divs, you have to specify a width in the outermost ones as well. im not sure why this is the case, but it has been fixed in the version of my code here: http://jsfiddle.net/H2anm/8/

I needed to specify a width for the entire outer div, since I had specified one for the gray div. prior to that, if I rolled off of the red/gray the hover flip didnt work.

JiminyCricket