[RESOLVED] Pseudo Element :hover changing color

[WhiteDragon]

Hello I would like to change the color on my :hover element current on :hover state it is black I would like to change it to another color (color unknown yet) but when I enter {color: #fff} in the :hover rule nothing changes color it still remains black ?

[Michael_Burgess]

Have you got the html / css you can post or link to please?

[WhiteDragon]

a.gallery:hover {background: url(image.gif);color: #6CA1F1}

[Michael_Burgess]

And the HTML?

[WhiteDragon]

It's a <ul> with <li> want that section of code?

[opifex]

do you have the css in the correct order?
1. a:link
2. a:visited
3. a:hover
4. a:active

the order does matter!

[WhiteDragon]

Yeah, I'm sure I do.

[WhiteDragon]

I was told to put in {color: #fff} within the :hover pseudo element.

[opifex]

post your css and html for the menu or a link to a test page.

[Mr. E. Cryptic]

It's hard to advise without a more complete look at your CSS, but here's a few posibilities:

Change a.gallery:hover

to one of:

.gallery a:hover if assigned by class
#gallery a:hover if assigned by id
li a:hover if another rule is closer to the list and overriding.

[WhiteDragon]

HTML
<a class="gallery" href= "/gallery.htm">Gallery</a></li>


CSS
a.gallery {background: url(image.gif);}
a.gallery:hover {background: url(image.gif);color: #6CA1F1}


The <Li> is within a <uL>
I hope this helps it is perfect the way it is now, it's just I want to change the color on the :hover state.

[Mr. E. Cryptic]

have you got any styling applied to the unordered list? if so, what is the class name?

[WhiteDragon]

No style applied to the <uL>

[Mr. E. Cryptic]

again, it's hard to say what might be going wrong without seeing where / what could be conflicting, but this should work;

append to your CSS sheet:
.gallery a:hover{color: yourCOLOUR}

Remove the class decs from your links:
<li><a href="gallery.htm">Gallery</a></li>

reference the style in the unordered list opening tag
<ul></ul> to become:

<ul class="gallery">
<li><a href="gallery.htm">Gallery</a></li>
</ul>

If you're still having no success, provide a link to your page or post the FULL css sheet and FULL html page

[opifex]

if you want to use the pseudo classes yo MUST use them in the specified order as i said earlier! a:hover has NO effect if a:link AND a:visited aren't defined FIRST!!!

a.gallery {background: url(image.gif);}
a.gallery:link{color: #fff}
a.gallery:visited{color: #fff}
a.gallery:hover {color: #000}
a.gallery:active{color: #000}

combine them, change the colors, backgrounds, text-size, text-indent.... whatever you want.... JUST FOLLOW THE ORDER!

might be a good idea for you to invest a little time in reviewing a few basic references... in this case a good example is at W3C (http://www.w3schools.com/CSS/css_pseudo_classes.asp). Check it out

[WhiteDragon]

I don't want to destroy what is currently cause it's clean but I will look over some of the suggestions.

{background-color: #fff} works, but I want it just to be applied to the test currently it's the whole div class

I didn't need someone to write the code for me, I had it simplified it was working before.

[opifex]

i got curious and reviewed your previous posts.... wow.
it just might be the right time to start learning a little bit about the things you keep asking about. help is one thing, if you need some one to write code for you you need to hire someone.

[WhiteDragon]

-Problem Solved-