Change Opacity on All Elements Except Hovered One

Change opacity on all images ONLY except hovered one

Using a little bit of JavaScript you can achieve that...

var elements = document.getElementsByClassName('dimImagesHover')

for (var i = 0; i < elements.length; i++) {
  elements[i].onmouseover = function( e ){
    //check if it is an image that has been hovered
    // and add a class to parent
    if(e.target.tagName == 'IMG'){
      this.classList.add("imgHovered");
    }
  }
  elements[i].onmouseout = function( e ){
    this.classList.remove("imgHovered");
  }
}

.dimImagesHover img {
  transition: 0.25s;
}
.dimImagesHover.imgHovered img {
  opacity: 0.3;
}
.dimImagesHover img:hover {
  opacity: 1;
}

<div class="dimImagesHover">
  <img src="/" alt="demo 1">
  <img src="/" alt="demo 2">
  Here is a test ! When I hover this texte, I need to have my image in opacity 1.
  <img src="/" alt="demo 3">
</div>

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>

How to style all elements of the same type except the hovered one?

The best bet to do this without javascript would be to apply the background colour to the parent container and then lower the opacity on hover of the parent to all children and then increase the opacity of the specific element hovered over.

.d-flex {  display: flex;  justify-content: space-around;}.d-flex:hover > div {  opacity: 0.5;}.d-flex:hover > div:hover {  opacity: 1;}
.item {  background: red;  flex-grow: 1;  padding: 1rem;  transition: opacity 1s ease-in-out;  color: white;}

<div class="d-flex">  <div class="item">item 1</div>  <div class="item">item 2</div>  <div class="item">item 3</div>  <div class="item">item 4</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>

On Hover, Change Opacity of Other Links

Since CSS does not support previous sibling or parent selectors, there is only one way to get it to work if you want to do it the CSS-only way:

When the entire .navbar-nav element is hovered on, all .nav-item will fade out to, say, opacity: 0.25
When any individual .nav-item is hovered on, it will fade in to opacity: 1

However, a catchall to this method is that it is layout-dependent and only works best if the links are shrink-wrapped in a way, such that there is no empty space in the <ul> that is not filled by its child:

.nav-item {  transition: opacity .25s ease-in-out;}
.navbar-nav:hover .nav-item {  opacity: 0.25;}
.navbar-nav:hover .nav-item:hover {  opacity: 1;}

<ul class="navbar-nav">  <li class="nav-item">    <a class="nav-link active" href="#">Publisher</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Advertiser</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Offers</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">About</a>  </li></ul>

How to select all elements except the one hovered using Vanilla Javascript?

What you can do is basically. Keep a reference to the icons array. In the mouse hover event filter your array to exclude the hovered item.

const icons = Array.from(icon);
icons.map((i) => { 
  
  i.addEventListener("mouseover", function (e) {
    const el = e.target;
    el.style.backgroundColor = el.getAttribute("data-color");
    icons.filter(x=>x !== el).
    forEach(r=>r.style.fill= r.getAttribute("data-color")) // here the rest of the items are set.
  });

Change CSS value of other elements if one element is being hovered

You're almost there:

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin 1em;
  background: navy;
}

section:hover div {opacity:.7}

section:hover div:hover {opacity:1}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

How can I change opacity of not hovered columns on highchart?

You can achieve it by using the mouseOver and mouseOut callbacks to changes the opacity of the points.

Demo: https://jsfiddle.net/BlackLabel/1srupnxk/

point: {
  events: {
    mouseOver() {
      let series = this.series;

      series.points.forEach(p => {
        p.graphic.css({
          opacity: 0.3
        })
      })

      this.graphic.css({
        opacity: 1
      })
    },
    mouseOut() {
                let series = this.series;

      series.points.forEach(p => {
        p.graphic.css({
          opacity: 1
        })
      })
    }
  }
},

API: https://api.highcharts.com/highcharts/series.column.point.events.mouseOver