If you need to have this work in Internet Explorer, you're going to be very frustrated. The onmouseover event doesn't apply to option elements in IE.

See http://msdn.microsoft.com/en-us/library/ms536949(VS.85).aspx
(scroll down to Applies To section)

Same goes for onmouseenter:
http://msdn.microsoft.com/en-us/library/ms536945(VS.85).aspx


--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Apr 10, 2009, at 11:59 AM, gostbuster wrote:


Hi everyone,

I'm getting in trouble with Jquery selectors.

I explain my problem :

I have a select box from a form like this :

<select>
<option ....>opt1</option>
<option ....>opt2</option>
<option ....>opt3</option>
</select>

And i want to produce an effect on it when I the mouse hover.

I'm using the qtip plugin from craigWorks.

here is my code :

$(function(){
        $("#description > option:not(:first):hover").qtip({

                 content:
                 {
                        title:"Description de "+$(this).text(),
                        text:'<center><img class="throbber" 
src="/images/throbber.gif"
alt="Loading..." /></center>',
                        url:'descriptions/voir/desc/'+$(this).val()
                         }
                         ,
                        position:{


                                 corner: {
                                 target:'rightTop',
                                 tooltip:'bottomLeft'
                         },
                         adjust:{
                                        y:10
                                 }


                                }
                         ,
                        style:
                         { tip: 'leftBottom',
                                 width: {
                                        max:400
                                 }
                                 }
                         ,

                   show: 'mouseover',
                   hide: 'mouseout'

        })})

The event triggers as expected. but :

with this line, i'm setting the tip box title :

title:"Description de "+$(this).text(),

If i hover the first option, this should display :   Description de
opt1 BUT it selects all the options text as :

Description de opt1opt2opt3.

I don't know of to select then ONLY the hovered option...

I tried to put a .mouseover() like :

(#my element).mouseover(function(){

$(this).qtip({...............})
......

It does work, but we need to do a first mouse over before ( when the
page is loaded you hover an option, than you put your mouse outside of
it, and you put it again....and the tooltip displays....


If someone could help me, it would be great.

Thanks in advance.

Reply via email to