CODEWITHSUNDEEP
wordpresscsscss-selectors
stefania.kease
stefania.kease

Reputation: 55

CSS (no) hover issue (default cursor)

I have an issue with CSS. In a Wordpress menu I want to add text, which is not a link. Therefore I added a link to # and now I would like to remove the coursor hand. Therefore I added no-hover to the CSS class of the menu, which is defined as:

.no-hover a:hover {
    cursor: default;
}

An extract from the menu looks like this:

<li id="menu-item-516" class="no-hover menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-516">
<a href="#">ABOUT</a>
<ul class="sub-menu">
<li id="menu-item-533" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-443 current_page_item menu-item-533 active ">
<a href="/history">History</a>
</li>

The whole CSS for the theme is here http://pastebin.com/mJ6tMUts - the bootstrap is here http://pastebin.com/bEQBUWUY

However, when I enable the CSS, the cursos on all items is the default one. How do I fix it? Thank you!

Upvotes: 1

Views: 392

Answers (3)

user3080415
user3080415

Reputation:

Try using !important

.no-hover a:hover {
    cursor: default !important;
}

JSFIDDLE DEMO: http://jsfiddle.net/8s78431c/

Upvotes: 0

dfsq
dfsq

Reputation: 193291

Based on comments discussion, you probably want direct child selector:

.no-hover > a:hover {
    cursor: default;
}

Demo: http://jsfiddle.net/fefdh8rj/1/

Upvotes: 1

Rasel
Rasel

Reputation: 5734

if you do not want any cursor then use like this

<a href="#" class="as">ABOUT</a>

.as{
    cursor:none !important;
}

see more cursor here

Upvotes: 0

Related Questions