Hover on element and highlight all elements with the same class
The best you can do using pure CSS is this:
.classname:hover ~ .classname {
background-color: yellow;
}
But this only highlights all siblings with a class classname after the hovered element.
You have to use JavaScript to highlight all elements;
var elms = document.getElementsByClassName("classname");
var n = elms.length;
function changeColor(color) {
for(var i = 0; i < n; i ++) {
elms[i].style.backgroundColor = color;
}
}
for(var i = 0; i < n; i ++) {
elms[i].onmouseover = function() {
changeColor("yellow");
};
elms[i].onmouseout = function() {
changeColor("white");
};
}
If you have multiple classes and want to generalize this, use something like this:
var classes = ["one", "two", "three"]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
var curN = n[classname];
for(var i = 0; i < curN; i ++) {
elms[classname][i].style.backgroundColor = color;
}
}
for(var k = 0; k < nclasses; k ++) {
var curClass = classes[k];
elms[curClass] = document.getElementsByClassName(curClass);
n[curClass] = elms[curClass].length;
var curN = n[curClass];
for(var i = 0; i < curN; i ++) {
elms[curClass][i].onmouseover = function() {
changeColor(this.className, "yellow");
};
elms[curClass][i].onmouseout = function() {
changeColor(this.className, "white");
};
}
};
Highlight all elements with same class when one of them is moused over
I can't help but feel this should be more concise (the use of three for (...) loops feels unnecessarily expensive), but one approach:
Object.prototype.classHighlight = function (over, out) {
var that = this.length ? this : [this];
function onOver() {
for (var i = 0, len = that.length; i < len; i++) {
that[i].style.backgroundColor = over;
}
}
function onOut() {
for (var i = 0, len = that.length; i < len; i++) {
that[i].style.backgroundColor = out;
}
}
for (var i = 0, len = that.length; i < len; i++) {
that[i].onmouseover = onOver;
that[i].onmouseout = onOut;
}
};
document.getElementsByClassName('test').classHighlight('#f90', '#fff');
JS Fiddle demo.
Six years later, following a link to this question and answer, I'm editing to update the above approach, and to add snippets and references.
Updated code:
// extending the Object prototype to allow chaining of this method,
// 'over' : String, the class-name to add when the element(s) of the
// HTMLCollection/NodeList are hovered-over. We also set the default
// value of the 'over' variable in order that a class-name will always
// be present:
Object.prototype.classHighlight = function(over = 'over') {
// taking the 'this' and using the spread operator to expand
// the iterable collection to an Array:
const that = [...this],
// creating a named function to act as the event-handler for
// 'mouseenter' and 'mouseleave':
toggleHighlight = (event) => {
// iterating over the array using Array.prototype.forEach():
that.forEach(
// we're not using 'this' in here, so using an Arrow function
// to use the Element.classList API to toggle the supplied
// class on each element of the collection. If the event-type
// is exactly equal to 'mouseenter' we add the class otherwise
// we remove the class:
(el) => el.classList.toggle(over, event.type === 'mouseenter')
);
};
// iterating over the collection, again using Array.prototype.forEach():
that.forEach(
// and another Arrow function:
(element) => {
// here we bind the toggleHighlight function - created above - as
// the event-handler for both the 'mouseenter' and 'mouseleave'
// events:
element.addEventListener('mouseenter', toggleHighlight);
element.addEventListener('mouseleave', toggleHighlight);
});
};
// here we use document.getElementsByClassName() to retrieve an HTMLCollection
// of elements matching the supplied class-name; and then using chaining - which
// is why we extended the Object prototype - to pass that HTMLCollection to
// the classHighlight() function:
document.getElementsByClassName('test').classHighlight('whenOver');.whenOver {
background-color: #f90;
}<p class="test">Testing</p>
<div>No classes here</div>
<ul>
<li class="test">Something in a 'test' element</li>
</ul>applying hover to all elements with same class name with css
Based on your HTML structure you can manage this with a sibling selector and well as a direct one, for instance:
.right:hover ~ .right,
.right:hover {
z-index: 10;
}
body {
margin: 0;
}
#container {
position: relative;
background: #D5D8DC;
height: 100px;
width: 100px;
margin-top: 10px;
margin-left: 10px;
}
.right {
background: #2ECC71;
}
.right:nth-child(1) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
right: 0;
}
.right:nth-child(2) {
position: absolute;
height: 10%;
width: 80%;
top: 0;
right: 0;
}
.right:nth-child(3) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
left: 20%;
z-index: 10;
}
.right:nth-child(4) {
position: absolute;
height: 10%;
width: 80%;
right: 0;
bottom: 20%;
}
.left {
background: #E74C3C;
}
.left:nth-child(5) {
position: absolute;
height: 10%;
width: 80%;
bottom: 0;
left: 0;
}
.left:nth-child(6) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
left: 0;
}
.left:nth-child(7) {
position: absolute;
height: 10%;
width: 80%;
left: 0;
top: 20%;
}
.left:nth-child(8) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
right: 20%;
}
.right:hover~.right,
.right:hover {
z-index: 10;
}
.left:hover~.left,
.left:hover {
z-index: 10;
}<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
</div>Apply :hover styling to all elements that have the same class
Reading your comments, i guess you want to have gold color on all of your buttons if you hover over parrent element.
If it is the case, you can do that
.dialog-btns:hover .dialog-btn{
background-color: gold;
}
JQuery hover function select all elements with same class name
Following are the changes needed for your code.
HTML CHanges:
<ul>
<li class="cell orange-cell" data-color="orange">Home</li>
<li class="cell green-cell" data-color="green">About</li>
<li class="cell purple-cell" data-color="purple">Contact</li>
<li class="cell white-cell" data-color="white">Num</li>
</ul>
<h1>Some text here</h1>
<ul>
<li class="cell orange-cell" data-color="orange">Home</li>
<li class="cell green-cell" data-color="green">About</li>
<li class="cell purple-cell" data-color="purple">Contact</li>
<li class="cell white-cell" data-color="white">Num</li>
</ul>
<h1>Some text here</h1>
<ul>
<li class="cell orange-cell" data-color="orange">Home</li>
<li class="cell green-cell" data-color="green">About</li>
<li class="cell purple-cell" data-color="purple">Contact</li>
<li class="cell white-cell" data-color="white">Num</li>
</ul>
<div id="darkness"></div>
JS Changes :
jQuery( document ).ready(function( $ ) {
$('.orange-cell, .green-cell, .purple-cell, .white-cell').hover(function() {
var color = $(this).attr('data-color');
$("."+color+"-cell").addClass('z-relative');
$('#darkness').fadeTo(200, 1);
},function() {var color = $(this).attr('data-color');
$("."+color+"-cell").removeClass('z-relative');
$('#darkness').fadeTo(200, 0, function(){
$(this).hide();
});
});
});
Related Topics
Is There a CSS "Haschildren" Selector
@Import Styles Not Working in a Media Query
CSS Pseudo-Element to Apply the First Character of an Element
How to Make a Curve on a Rectangle's Top in CSS? Only in Top Edge
Google Webfont Conflict with Local Font
How to Recreate Perspective-Origin Effect by Transforming Child Elements
Css3 Animation and Background-Image in Firefox
Why Doesn't Justify-Content: Center Work in Ie
Invalid Property Value on Background-Image
Print Footer on Every Printed Page from Website, Across All Browsers (Chrome)
Svg: Why Does External CSS Override Inline Style for Text
Two Divs Next to Each Other, That Then Stack with Responsive Change