Must Link Rules for content links be equal for text & images?

[Ahrale]

Hi,

I had added thefollowing css on content links (hover) :

{background:#ff9900;color:white;border-radius:1.5em;padding:0 7px;}

It looks geat on text, but my problem is that I don’t like the way it looks on clickable images.

You can see how it looks on my http://atar4u.com (both text & images).

Any solution?

Thanks & Enjoy Life 🙂

Ahrale

[Weaver]

Add different styling for images like this – start with your CSS+ rule, then add (adjusted to your preferences):

{background:#ff9900;color:white;border-radius:1.5em;padding:0 7px;} %selector% img {background:none;color:blue;border-radius:0;padding:0;}

The %selector% is a special Weaver Xtreme operator that the appropriate classes to the BG CSS+ rule.

[Ahrale]

Thanks,

I’m not sure where do I define the selector for all images.

If you mean %selector% img is the selector, so the hover rule still works for images.

{background:#ff9900;color:white;border-radius:1.5em;padding:0 7px;}%selector% img {background:none;color:none;border-radius:0;padding:0;}

I’ll try to look more into it, but perhaps you got another hint for me.

Thanks & Enjoy Life 🙂

Ahrale

[Weaver]

You said you added the {background:#ff9900 etc.} to the CSS+ on the content links hover option.
If you simply add %selector% img {rules for link images} after your existing CSS for the regular link hover, that should “undo” the hover rules you don’t want on images.

Your existing CSS+ rule generates rules for all a:hover links in the content area. By adding a:hover img rules, that will define a new set of CSS rules just for hover on images. In general, most CSS+ rules are on a BG color rule. For link hover, there also is a CSS+ for hover. By using a CSS+ rule on an existing color option, then using the special value %selector%, you can add additional rules that apply to the option with the CSS+.

[scrambler]

@weaver, I don’t think its does. The image html is

<a href=”…”>
   <img…./>
</a>

So whatever style is on the a tag will always be there regardless of what is on the img tag.

And CSS (3) does not have any way to select a parent based on his children, so you cant select <a> tags that have an <img> child.

The only way I see is to add a class to your Link tags that have an image, so that you can create a rule to undo the styling on these

<a class=”myimglink” href=”…”>
   <img …/>

Then add the rule below in MAin Options > Fonts & Custom > Custom CSS Rule box

#content .myimglink {background:none;color:blue;border-radius:0;padding:0;}

You may have to ad !important to the rules

[Ahrale]

Thank you both, Weaver & Scrambler

It seems you was right, Scrambler. I created MyImage class & gave it to these images,

I added the code: .MyImage a:hover{border-radius:5em;}

and I can live with the result, but for some reason, no other rulles worked for me,

not even with !important…   tried display:none; tried background:none; tried background:transparent;

& few other rules, but for some reason they did not take over.

Now on hover on the images it shows the orange line & the bottom of the image without jumping,

as you can see on http://atar4u.com … it is kind of nice but not what I meant…

I thought the image will become a circle on hover.

Anyway, Thanks & Enjoy Life 🙂

Ahrale

[Weaver]

You’ve put the class .MyImage on the <img>, and it needs to be on the <a> wrapping the image.

And the rule would be a.MyImage, not .MyImage a.

[scrambler]

I did miss the hover in my rule, but please read what I said in my post for where the rule goes

<a class=”myimglink” href=”…”>
   <img …/>

Then add the rule below in MAin Options > Fonts & Custom > Custom CSS Rule box

#content .myimglink:hover {background:none;color:blue;border-radius:0;padding:0;}

[Author]

Posts