Search jQuery

jQuery Forum

jQuery Mobile

markgoess..

Hover button arrow

in jQuery Mobile • 10 years ago

Hi all,

m.ideebv.com has a menu generated with wayfinder.

You see that the menutext is white when hovered. But the black arrow on the right side disappears.

I made a white version of this and I tried a several things to make a hover for the arrow too.

In jquery.mobile-1.0min.css I add the following line:

.ui-icon,.ui-icon-searchfield:hover:after{background-image:url(images/icons-18-white.png);background-repeat:no-repeat;}

.ui-icon,.ui-icon-searchfield:hover{background-image:url(images/icons-18-white.png);background-repeat:no-repeat;}

But it al won't work.

Does someone know how I can hover the arrow?

Greets Mark

Replies(8)

markgoess..

Re: Hover button arrow

10 years ago

The solution seems easy, but I still can't find it.

Anyone?

haga0054

Re: Re: Hover button arrow

10 years ago

I don't see the problem at all.. I need more explaination. Can you re-create this with a simple example on jsfiddle.net? If not, please give more detail.

markgoess..

Re: Hover button arrow

10 years ago

Hello haga0054,

Thanks in advance for your help.

Maybe you can't see the problem at all because I changed the buttons. The result is that the buttons don't look like my description. But it doesn't solved my problem, so I changed it back.

I'm going to try to explain it better.

On m.ideebv.com you see 4 buttons.

If you hover one of these buttons (on your desktop), you see a black rollover and the text turns white instead of black.

On the right side there is a black arrow. (>) My wish is, when I hover the button, this arrow turns white.

Normally that's very easy with css. But in this case I can't make this work.

Here you can see how the CSS looks like. The css with the :hover didn't exist. So I wrote this by myself.

But unfortunately it doesn't work.

http://jsfiddle.net/wDyds/

Do you see what I'm doing wrong?

Greets, Mark

haga0054

Re: Re: Hover button arrow

10 years ago

I think you want to change the icon on hover. So if you have two icons (1 black 1 white) switch them on hover and mouseout.

http://jsfiddle.net/wDyds/2/

markgoess..

Re: Hover button arrow

10 years ago

Thanks for your answer.

Yes, this is what I mean.

Actually, in my case it's a little bit different and more dificult.

I use MODX as CMS behind jquery Mobile.

To make the menu list, I use Wayfinder. I don't know if you have experience with that.

But the conclusion is, it's hard to make the HTML like you wrote.

Here you can see how Wayfinder made the menu HTML (one menu-item): http://jsfiddle.net/s7nhV/

I tried editing the javascript to match the classes etc. with the HTML of my website, but this didn't work.

Is there no simple solution like the hover css I mentioned at the beginning?

I also don't want to use the jqeury icons, but my PNG as icon.

markgoess..

Re: Hover button arrow

10 years ago

Okay, I changed your code a bit so it matches with my code which I see in the code inspector.

http://jsfiddle.net/wDyds/3/

At jsfiddle it works, but it doesn't work at my website. Even if it's completely te same.

What am I doing wrong?

haga0054

Re: Re: Hover button arrow

10 years ago

I noticed you removed the custom class. You could add a custom class to the list, otherwise I would change it from .ui-btn-text to .ui-li in the javascript.

markgoess..

Re: Hover button arrow

10 years ago

Hi Haga0054,

Thanks for your help.

I saw several different custom classes worked. .ui-btn-text and .ui-li in made no different.

A friend of mine saw what the real problem was in my case.

I had to place this function before the javascript

$(document).bind('pageinit', function() {

$(document).ready(function(){

Now it works very well.

Thanks for your help! Now I can go further with this and change the icons.

Top Reply

Response title

Attachments

jQuery Forum

Hover button arrow

Replies(8)

Re: Hover button arrow

Re: Re: Hover button arrow

Re: Hover button arrow

Re: Re: Hover button arrow

Re: Hover button arrow

Re: Hover button arrow

Re: Re: Hover button arrow

Re: Hover button arrow

Statistics

Tags

Actions