Select All Link Element On Hover CSS-CodePudding

I have this on my hover CSS ->

.menu-icon:hover,
.source-icon:hover,
.title h1:hover,
.title h2:hover, 
.list-title h1:hover,
.list-title h2:hover,
.single-content a:hover,
.button:hover,
.pagination .prev:hover,
.pagination .next:hover,
.copyright:hover,
.copyright a:hover {
fill: #e00;
color: #e00;
}

Is there a way to simplify about selecting all link element on hover CSS?

Because I tried *a:hover or * a:hover but it doesn't work?

CodePudding user response：

I think you are looking for something like this answer.

With *:hover you are selecting the root element itself. As you want to select every single element, what you are looking for is to select all HTML body's children, for example.

body *:hover {
  fill: #e00;
  color: #e00;
}

CodePudding user response：

You don't need anything before the :hover if you want to apply the effect to all elements when hovered over. Sadly, this will make the effect apply to everything and is probably what you don't want. I would create a new class in css with the hover attributes and then add the class to all the buttons and elements in your HTML

  .hover:hover {
    fill: #e00;
    color: #e00;
  }