disable text highlight on mouse over using css

Question

I want my text on the button to be not highlighted when the mouse pointer is moved over it.

i tried applying the following which didnt work.

background-color:transparent;
opacity:1;

someone, please let me know the style to be applied. Let me know if you need additional information.

Please can you add you full css of your hover and none hover states (with the full selectors) — Pete, Oct 29 '14 at 14:26
`background-color` doesn't do anything with text and `opacity: 1` is default, so the things you tried don't really make sense — Goos van den Bekerom, Oct 29 '14 at 14:27
I Don't cath the issue but maybe if is user-select what you want to disable try [THIS SOLUTION](http://stackoverflow.com/q/826782/2887133) — DaniP, Oct 29 '14 at 14:39

score 1 · Answer 1 · answered Oct 29 '14 at 14:29

1

Try this (example):

Normal: (highlighted)

a{
    color: red;
    text-decoration: underline;
}

Hovered (not highlighted)

a:hover{
     color: black;
     text-decoration: none;
}

answered Oct 29 '14 at 14:29

Pat Dobson

score 1 · Answer 2 · answered Oct 29 '14 at 14:39

Here's a quick example of what you can do:

#ID {
    background-color:yellow;
}

#ID:hover{
    background-color:white;
}

This will cause the text in the html element with id ID to be highlighted UNLESS the mouse is hovering over the text.

Here's a jsFiddle with the sample code.

Nirvik Baruah · Answer 3 · 2014-10-29T14:37:04.153

0

On you :hover code snippet set the color of the text to what you want it to appear as. For example:

#element a{
    color: black;
}

#element a:hover{
    color: black;
}

Remember that to change the colour of the text you have to use color, not background-color.

edited Oct 29 '14 at 14:37

answered Oct 29 '14 at 14:31

Nirvik Baruah

3 Answers3