Link styling [edit a click event style]

This topic contains 11 replies, has 3 voices, and was last updated by  Sebastian 4 years, 10 months ago.

Author Posts

venorme

Hello.
Trying to style menu. Did great with current, active and hover but cant seem to get it right. When I hover style is ok, when I click and keep mouse over clicked button style is ok, but when I click and move mouse from the button – link styling is changing. Which selector should I go for (tryed em all). It`s defo not active link.


Sebastian

Hi there,

Please could you send me a link to your site and let me know which internet browser you’re using?

Many thanks,
Sebastian


venorme

Thank you for swift response.
It’s development site ukrbot.com
Chrome 34


Sebastian

Hey,

Are you referring to the dotted lines that appear when you click on one of your menu links? https://themeover.com/wp-content/uploads/2015/04/dotted-lines.png

Or are you referring to this affect that only occurs in Chrome when you drag a link: https://themeover.com/wp-content/uploads/2015/04/dragged-link.png

I think the later is caused by some native Chrome styling. The same thing happens if you drag a link on themeover.com. I’m not sure if this can be overridden I couldn’t find any info online about it. It’s not hugely common for people to try to drag links in a menu though.

But are we even talking about the same thing?

Cheers,
Sebastian


venorme

Here how looks normal link with mouse hovered on it Here

And here how it looks like after I press the link and move mouse away Here


Sebastian

Ah I think I see what you mean now. I believe the blue link is caused by a transition effect. Microthemer doesn’t have UI fields for transition yet so you’ll need to override this by pasting the following code into the custom code editor (see icon in top right of interface)

li.menu-item a {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

If you want to disable the transition effect on all links (not just menu links) you would use this code instead:

a, 
li.menu-item a {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

Please let me know how you get on.

Cheers,
Sebastian


venorme

Pity to say but it does not work. I ve tryed both microthemer css and custom css from theme.
Getting these types of warning in MThere and here


Abland

Hi, venorme,

Maybe try adding focus to your hover selector.
Where you have:
li.menu-item a:hover

add focus also:
li.menu-item a:hover,
li.menu-item a:focus


Sebastian

Ah yes, I see now that your theme has some styles for links in the :focus state.

a:focus {
color: #0a6ebd;
text-decoration: underline;
}

Hopefully Abland’s suggestion will work for you. BTW the warnings in the code editor are not critical, they’re just providing extra guidance on how to write less code or support more browsers with browser prefixes.


venorme

That was great idea. Working as intended now.
Thank you both Sebastian and Abland.
Wasn`t even aware of focus settings existence.


venorme

BTW after todays update microthemer runs way faster.
Wanted to ask are you planning to add that focus selector? Had no idea it`s coded into theme I am using


Sebastian

Ah that’s brilliant that you’ve noticed a bump in speed.

And yes, we can add the :focus pseudo selector to the wizard for link and form elements.

Cheers,
Sebastian

You must login or register to reply to this topic.