how to stop hover image 'underline' (now once and for all....)

I do not want the background or border of the image in hover state to change color. But it still does.

I’m feeling a bit uncomfortable that I cannot solve this myself…sigh
I searched the internet after hover image, found lot’s of hits, but not a working solution, amazingly enough.

DOCTYPE XHTML 1.0 Strict, and these are the link styles:

a:hover { color:#ffd700; text-decoration:underline; background-color:#FFFFFF }
.img:hover { color:#FFFFFF; background-color:#FFFFFF; text-decoration:none; border-style:none;  and-some-more-styles; }

page here: http://skulpturparkhunnebostrand.se/index.php/se/history/19

Can anyone see why it does not work?

Thanks a lot!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The styling is wrong. Shouldn’t it be:

a:hover img { background-color: #ffffff; text-decoration: none; border: 0; }

You wouldn’t set a “color” for images because that’s just for text.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Something like this, http://www.xiiro.com/demo/atelier/index.html?
This is very quick-n-dirty but you can play around with it.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi

Thanks for answering both of you.
Unfortunately, Dan’s suggestion did not give the desired result.
And Tod, I understand what you did.
But it does not work, because I have already defined my link tag, cannot set it to white.
Here’s my stylesheet: (add www.)

skulpturparkhunnebostrand.se/edit/default_site/css/basics.css

It’s a riddle…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The problem stems from “background-color:#00008b” in this:

a:hover { color:#ffd700; text-decoration:underline; background-color:#00008b }

Removing the background-color property from that will fix the problem, and this won’t happen anymore either:

http://cl.ly/6RwO

If you do want the background color to appear on your text links then you’ll need to add a class or something to the anchors around the images so you can single them out as being different from any other anchor (and add a new style that targets the new class).

Hope this helps,

Joe

On 3 May 2011, at 16:43, atelier wrote:

Hi

Thanks for answering both of you.
Unfortunately, Dan’s suggestion did not give the desired result.
And Tod, I understand what you did.
But it does not work, because I have already defined my link tag, cannot set it to white.
Here’s my stylesheet: (add www.)

skulpturparkhunnebostrand.se/edit/default_site/css/basics.css

It’s a riddle…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Joe

I was w
aware of that, therefore I did add a class to my images, called .img but I cannot get the background coded well in that style…
This is the code for the images, with the rendering in HTML

{if hist_1_tb !=""}<a class='popup'  href="{exp:extract_url}{hist_1}{/exp:extract_url}"><img src="{hist_1_tb}" class='img' alt="{title}"/></a>{/if}

<a class='popup'  href="http://skulpturparkhunnebostrand.se/edit/uploads/images/Valborg_Udden_2011_039.jpg"><img src="http://skulpturparkhunnebostrand.se/edit/uploads/images/Valborg_Udden_2011_039_thumb.jpg" class='img' alt="Bilder och prat om Valborg 2011"/></a>

PS I see that my hover style for textcolor disappeared after all this experimenting…Have to switch back to were I started, I’m afraid…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You want the class on the anchors around the images, not the images themselves. The style selector will then need to be as follows:

a.img:hover { properties }

Joe

On 3 May 2011, at 17:07, atelier wrote:

Hi Joe

I was w
aware of that, therefore I did add a class to my images, called .img but I cannot get the background coded well in that style…
This is the code for the images, with the rendering in HTML

{if hist_1_tb !=""}<a class='popup'  href="{exp:extract_url}{hist_1}{/exp:extract_url}"><img src="{hist_1_tb}" class='img' alt="{title}"/></a>{/if}

<a class='popup'  href="http://skulpturparkhunnebostrand.se/edit/uploads/images/Valborg_Udden_2011_039.jpg"><img src="http://skulpturparkhunnebostrand.se/edit/uploads/images/Valborg_Udden_2011_039_thumb.jpg" class='img' alt="Bilder och prat om Valborg 2011"/></a>

PS I see that my hover style for textcolor disappeared after all this experimenting…Have to switch back to were I started, I’m afraid…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh, I didn’t get that code snippet as posted above. Joe is right in the proper CSS pseudo rule there to fix your issue.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Jo

I’m sorry not to understand this.
I added a style a.img:hover { background-color:#FFFFFF } to the stylesheet, but it did not give the wanted result.

In my stylesheet
.img:hover works, it causes the effect (opacity etc) on the image that has a link when I add class=‘img’ to that image.

Why does it not work when I add “background-color:#FFFFFF” to this style?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK, I think I found it.

I added vertical-align: bottom to the img and .img:hover style. Now I do not see the underline anymore.

If you consider this a good solution, then I suggest to close this topic.

Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I always make sure I “Publish Everything” from the File menu when I add a style to my stylesheet that is never attached to anything. Sometimes Freeway gets stuck and doesn’t add the style until I do that.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, I know. Sometimes I even double check by opening the css file in TextWrangler, to see if the changes are really in the stylesheet…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options