Why I have this strange CSS behavior on the a:hover tag?

Question

I have a problem with this custom theme on wich I am working on: http://www.asper-eritrea.com/

The problem is that when you pass the mouse over a link (for example the t

Answer 1

Because your CSS applying for all the links. For restrict to specific, you have to use like below.

 .widget-sidebar ul li a, .widget-sidebar ul li a:hover {
  color: #f1b000;
 }

Answer 2

The comma separates complete selectors. Your code is equivalent to:

.widget-sidebar ul li a {
    color: #f1b000;
}

a:hover {
    color: #f1b000;
}

You need to specify .widget-sidebar ul li for both parts of it,

Answer 3

You have two selectors. First is .widget-sidebar ul li a and second is a:hover.
Change it to .widget-sidebar ul li a, .widget-sidebar ul li a:hover {}

Answer 4

Change the CSS Style to

.widget-sidebar ul li a, .widget-sidebar ul li a:hover {
   color: #f1b000;
 }

Answer 5

That CSS rule means, select all the links in the li's in the ul's in the widget-sidebar AND all a tags on hover, what you're looking for is:

.widget-sidebar ul li a, .widget-sidebar ul li a:hover {
    color: #f1b000;
}

This means they will always be yellow, even on hover