Selecting All Links Except Hovered One CSS Only

Selecting all links except hovered one CSS only

You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.

However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?

Demo Fiddle

(and an alternative)

div:hover a:not(:hover){
    color:red;
}

How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

Using jQuery, you could do something like this:

jQuery

$('a.menu-link').hover(function(){
 $('a.menu-link').not(this).toggleClass('toggle');
})

CSS

.toggle {
  opacity: 0.7;
}

Here is a fiddle of it in action: http://jsfiddle.net/HMq67/

Using toggleClass() and not() you can change the style of every element that is not the one you are hovering over.

All elements filter but hovered

Here is on hover of Child Element rest of Child is filter

.parent .child:not(:hover) {  color:#00ffff;  -webkit-filter: grayscale(1);  -moz-filter: grayscale(1);  -ms-filter: grayscale(1);  filter: grayscale(1);  opacity: .75;}

<div class="parent">  <div class="child">Child 1</div>  <div class="child">Child 2</div>  <div class="child">Child 3</div></div>

CSS - blur all children except the hovered one, just when hovering over a children

Yes you can but you need to target the parent and the child, like below

We say when parent is hovered(it is hovered when you hover over its child) and target the children which is not hovered, make them blurry

.child {
  height: 50px;
  width:100px;
}
.child:nth-child(1) {
  background-color: red;
}.child:nth-child(2) {
  background-color: yellow;
}.child:nth-child(3) {
  background-color: blue;
}.child:nth-child(4) {
  background-color: green;
}

.parent:hover .child:not( :hover ) {
  filter: blur(15px);
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Hover effect that changes all of same type except selected hover

Could you set a hover rule at the ul level that changes all items to black and red, and then override it on the specific hovered item?

ul li{
  list-style: none;
}

ul:hover li a {
   color: red;
   background: black;
}

ul li a {
   color: black;
}

ul li a:hover{
   color: green;
   background: orange;
}

<ul>
   <li>
     <a>test</a>
   </li>
   <li>
     <a>test</a>
   </li>
   <li>
     <a>test</a>
   </li>
  </ul>

Change opacity on all elements except hovered one

You lower the opacity of all alements except the hovered one with CSS.

The point is to lower the opacity of all <li> elements when the parent (ul) is hovered and to reset the opacity to 1 on the hovered li element like this :

ul:hover li { opacity:0.5; }
ul li:hover { opacity:1; }

Here is a simple demo :

li{  float:left;  width:33.33%;  line-height:50px;  background:grey;  list-style-type:none;}ul:hover li{  opacity:0.5;}ul li:hover{  opacity:1;}

<ul>  <li>item</li>  <li>item</li>  <li>item</li></ul>

Blur all elements except one hovered

Add a new class .blur to each of the three divs

<div class="ppp blur">
   ...
</div>
<div class="tpe blur">
   ...
</div>
<div class="isn blur">
   ...
</div>

Then you can make the changes with jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.blur').mouseenter(function(){
  $('.blur').css('filter','blur(5px)'); // Blurs each .blur div
  $(this).css('filter','blur(0px)');    // Removes blur from the currently hovered .blur div
})
$('.blur').mouseleave(function(){
  $('.blur').css('filter','blur(0px)'); // Removes blur from all when none are hovered
})
</script>

Here is a pen with these changes in place

CSS Hover Will Not Work When Selecting Another Element

The H1 is not a child of the span it's a sibling so you need the sibling combinator + https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

span:hover {
  background-color: red;
  color: white;
}
span:hover + h1 {
  color: blue;
}

<span>HOVER</span>
<h1>test</h1>

---

Related Topics