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 toopacity: 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
Related Topics
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters
Google Chrome Printing Page Breaks
Justify the Last Line of a Div
Why Does Order of Transforms Matter? Rotate/Scale Doesn't Give the Same Result as Scale/Rotate
Mvc4 Stylebundle Not Resolving Images
Css 3 Slide-In from Left Transition
Vertical Align Middle in ≪Div≫
How to Set Opacity in Parent Div and Not Affect in Child Div
Truncating Long Strings With Css: Feasible Yet
How to Add Border in My Clip-Path: Polygon(); CSS Style
Css3 Gradient Background Set on Body Doesn't Stretch But Instead Repeats
How to Fade the Edge of a Div With Just CSS
Background Color of Text in Svg