Hey Gang,
I’ve been trying to figure something out on my own all morning and I’ve given up… this is my issue…
<div class=“AccordionPanelTab”><h2>Label 1</h2></div>
As you may or may not see I am using a SPRY accordion on the site (can’t give a link, it’s internal, sorry).
Anyways, if you’re familiar you’ll know that in SPRY you would normally rollover the div and it would “light up” or show a rollover state. The client has asked that the rollover actually take over for the click, that is, when you rollover the tab, the accordion expands to that tab. When you “click” a tab, they have asked that the tabs all close.
Everything is working fine except for the fact that my <h2> tag expands pretty much the entire length of the div, so here is a very image of what I am looking at…
|
| _______________________
|| Label 1
||_______________________
Sorry it’s so ugly, but imagine the outer most lines are the dimensions for the div and the lines just on either side of the Label 1 text is the area taken by the <h2> tags. My issue now is that if I roll withing a div, from say, bottom to top, or top to bottom, the “onRollover” event is fired when the mouse rolls over the div piece at the bottom, again when it rolls over the <h2> and again at the top. Of course, when the accordion tab is opened, the issue is moot, however, if someone closes the tab and then tries to move their mouse out anywhere, they have no choice but to roll out of their current area into another area in the same div that will fire the “onRollover” function, leading to the section of the accordion to open…
Is there any way for me to have the browser see the <div><h2></h2></div> as just a div? I’d imagine that I could just set the CSS for the div class to do what the <h2> is set to do, but I was curious if there was another way?
Thanks!
–d