I have 5 div's all with the same class name like this:
CSS:
.test:hover{
color:red;
}
HTML:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Imagine for a moment these Div's are in different parent div's on the page...
I'm trying to find a way so they all change to color:red if i hover my mouse over any of the 5 rather than just the one in question changing...
I can't wrap them in a parent and give that parent a hover how ever... they are not sharing the same parents in the first place.
Does CSS provide a way to do this or am I going to have to rest to JavaScript?
One (plain/vanilla) JavaScript approach that works (in compliant browsers, which support [].forEach(), and document.querySelectorAll()), given that CSS cannot (yet) perform this task, is:
function classToggle (evt, find, toggle) {
[].forEach.call(document.querySelectorAll('.' + find), function(a){
a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
});
}
var els = document.querySelectorAll('.test');
for (var i = 0, len = els.length; i<len; i++){
els[i].addEventListener('mouseover', function(e){
classToggle(e, 'test', 'highlight');
});
els[i].addEventListener('mouseout', function(e){
classToggle(e, 'test', 'highlight');
});
}
JS Fiddle demo.
References:
Array.prototype.forEach().
document.querySelectorAll().
Element.classList.
Function.prototype.call().
You could use JQuery to pretty easily achieve what you want... copy this to an .html file to test it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$(".test").hover(
function() {
$(".test").css("background-color", "red");
}, function() {
$(".test").css("background-color", "");
}
);
});
</script>
</head>
<body>
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div>
</body>
</html>
It's impossible to select element's parent via CSS nowadays. So also it's impossible to select element by one element and general parent. It's like a tiny proof.
Here is the code:
css:
.sample{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.sample:hover ~ div{
color:red;
cursor:pointer;
}
html:
<div class="sample"></div>
<div class="container">
<div class="test">1111</div>
</div>
<div class="container">
<div class="test">2222</div>
</div>
<div class="container">
<div class="test">3333</div>
</div>
<div class="container">
<div class="test">4444</div>
</div>
<div class="container">
<div class="test">5555</div>
</div>
Check the demo here: http://jsfiddle.net/eN49z/
Quick answer: it is not possible via CSS-only to achieve the effect that you are looking for, as CSS is unable to travel up the parent, but only down the DOM tree to affect elements.
You can, however, rely on JavaScript to achieve the effect. In my example I have chosen to rely on jQuery. You can use various methods to get all other <div>s with the class test, but it depends on how they are nested - are they nested under parents that are siblings, and the level of nesting and etc.
Here is an example markup of the scenario you have described:
<div>
Parent 1
<div class="test"></div>
</div>
<div>
Parent 2
<div class="test"></div>
</div>
<div>
Parent 3
<div class="test"></div>
</div>
The CSS would be simple. The .hover class (not the :hover state) is added dynamically by jQuery (see below):
.test:hover, .test.hover {
background-color: red;
}
The JS would be something like:
$(function() {
$(".test").hover(function() {
// Find '.test' in all siblings of a specific '.test' parent
$(this).parent().siblings().find(".test").addClass("hover");
}, function() {
// You can refine the criteria of which '.test' should be selected.
$(document).find(".test").removeClass("hover");
});
});
http://jsfiddle.net/teddyrised/fHwFf/
Related
i wanted to know if in css there is a way to inject a display none to the relative of an attribute es;
<div class="classeA">
<div class="classeB" data-userid="1234" >
</div>
</div>
what should i use?
[data-userid="1234"] < .classeA{
display:none !important;
}
what should I do?
I want class classA with display none selecting the data-userid attribute
You could consider using :has(), although as of yet there is no support across any browser.
It would look something like this:
.classeA:has([data-userid="1234"]){
display:none;
}
Demo:
$('.classeA:has([data-userid="1234"])').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classeA">
<div class="classeB" data-userid="1234">
</div>
</div>
The structure is similar to this:
<div>
<div id="selected">
<div id="inBetweenDiv">
<input id="action"></input>
</div>
</div>
<div id="changeThis"></div>
</div>
I want to change background of #changeThis on the focus of the input element.
In pure CSS you could use the :focus-within pseudoclass
#selected:focus-within ~ #changeThis {
background: yellowgreen
}
<div>
<div id="selected">
<div id="inBetweenDiv">
<input id="action" />
</div>
</div>
<div id="changeThis">Change this</div>
</div>
Otherwise you could do the same via JS, if you need to support older browsers e.g.
var input = document.getElementById('action');
var ct = document.getElementById('changeThis');
input.addEventListener('focus', () => { ct.classList.add('focus'); });
input.addEventListener('blur', () => { ct.classList.remove('focus'); });
and in CSS – assuming that #changeThis has a default background already applied – you need to use a more specific selector like
#changeThis.focus {
background: yellowgreen;
}
Not sure if this is possible but I'm trying to display a div if another div which doesn't share the same parent is hovered.
The html looks something like this:
<div class="test">
<div class="hover-me"><p>Hover</p></div>
</div>
// some other content here
<div class="hover-content">
<p>hovered content</p>
</div>
I've tried using
.test:hover + .hover-content {
display: block;
}
But I think this only works if there's no other content in-between? Any suggestions?
Use javascript to listen to the onmouseover event, or jquery to handle the hover event on one and change the display attribute of the other. Using jquery
<script>
$(document).ready(function () {
$(".hover-me").hover(function () {
$(".hover-content").show();
}, function() {
$(".hover-content").hide();
});
});
</script>
If you don't want to use jquery, change your html like so
<div class="test">
<div class="hover-me"
onmouseover="document.getElementById('hover-content').style.display = 'block';"
onmouseout="document.getElementById('hover-content').style.display = 'none';">
<p>Hover</p></div>
</div>
// some other content here
<div class="hover-content" id="hover-content">
<p>hovered content</p>
</div>
notice that I added an id attribute to the hover-content div.
Try this, i think it will help you :
<script>
$(document).ready(function () {
$( ".hover-me" ).mouseenter( function () {
$( ".hover-content" ).show();
}).mouseout(function () {
/*anything you want when mouse leaves the div*/
} );
});
</script>
So you want to display the .hover-content when you hover the test. You can try the following solution. If it does not work, you gotta use javascript to check for the mouseover event. Hope it helps!
.test:hover ~ .hover-content {
display: block;
}
See Example 3 in fiddle below...
https://jsfiddle.net/8opnvq37/1/
HTML
Example 1
<div class="a">A</div>
<div class="b">B</div>
<br /><br />
Example 2
<div class="a">A</div>
<div id="box"><div class="b">B</div></div>
<br /><br />
Example 3
<div id="box2"><div class="a">A</div></div>
<div class="b">B</div>
CSS
.a:hover ~ .b,
.a:hover ~ #box .b
{
background: #3F6;
}
As you can see Example 1 & 2 are working when you hover over A. I know for the hover effect to work, the elements has to be under the same parent— unless you specify it— in Example 2. But how do you get it to work when .a is under a different parent as shown in Example 3??
Does it absolutely need to be hovering on the .a element? I'm not sure it's possible with pure css if so. This would work, though:
#box2:hover ~ .b { background: #3f6; }
Ok I got that to work using javascript
http://jsfiddle.net/6vh5L2t0/
HTML
<div id="c">Div C</div>
---
<div id="box">
<div id="d">Div D</div></div>
Javascipt
$('#d').hover(
function(){
$('#c').css('background', '#F00')
},
function() {
$('#c').css('background', '')
});
I'm trying to assign different background-image for each of 10 elements with employee class. the hierarchy of the HTML is as follows:
<div class="crew-row">
<div class="employee"></div>
<div class="employee"></div>
</div>
<div class="crew-row">
<div class="employee"></div>
<div class="employee"></div>
<div class="employee"></div>
<div class="employee"></div>
</div>
<div class="crew-row">
<div class="employee"></div>
<div class="employee"></div>
<div class="employee"></div>
<div class="employee"></div>
</div>
so i thought i can use something like this in my css:
employee:nth-of-type(1){
background-image: url('../images/people/1.png');
}
.employee:nth-of-type(2){
background-image: url('../images/people/2.png');
}
.employee:nth-of-type(3){
background-image: url('../images/people/3.png');
}
.employee:nth-of-type(4){
background-image: url('../images/people/4.png');
}
.employee:nth-of-type(5){
background-image: url('../images/people/5.png');
}
...
or
.employee:nth-child(1){
background-image: url('../images/people/1.png');
}
.employee:nth-child(2){
background-image: url('../images/people/2.png');
}
.employee:nth-child(3){
background-image: url('../images/people/3.png');
}
.employee:nth-child(4){
background-image: url('../images/people/4.png');
}
.employee:nth-child(5){
background-image: url('../images/people/5.png');
}
...
but what happens is that even before i add any further code for the rest of employee they already assigned with previous background images...
any idea what will be the correct way to assign different background-image to each the employee elements?
The :nth-* pseudo class match elements based on their nth position with respect to their parent, not the entire document. So you can do this:
.crew-row:nth-child(1) .employee:nth-child(1) { }
.crew-row:nth-child(1) .employee:nth-child(2) { }
.crew-row:nth-child(2) .employee:nth-child(1) { }
.crew-row:nth-child(2) .employee:nth-child(2) { }
.crew-row:nth-child(2) .employee:nth-child(3) { }
.crew-row:nth-child(2) .employee:nth-child(4) { }
/* and so on */
However, I would rather get rid of .crew-row elements (they do not seem so serve a purpose other than grouping employees in separate rows) and use :nth-child to (i) assign background images (ii) push the 3rd, 7th, 11th, ... employee on to a new row.
I think you will have to use jquery's "each" function
$('.employee').each(function(index) {
var i = index % 5;
if (i == 0) {
$(this).css("background-color", "#ff0000");
} else if (i == 1) {
$(this).css("background-color", "#00ff00");
} else if (i == 2) {
$(this).css("background-color", "#0000ff");
} else if (i == 3) {
$(this).css("background-color", "#ffff00");
} else if (i == 4) {
$(this).css("background-color", "#00ffff");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="crew-row">
<div class="employee">1</div>
<div class="employee">2</div>
</div>
<div class="crew-row">
<div class="employee">3</div>
<div class="employee">4</div>
<div class="employee">5</div>
<div class="employee">6</div>
</div>
<div class="crew-row">
<div class="employee">7</div>
<div class="employee">8</div>
<div class="employee">9</div>
<div class="employee">10</div>
</div>
It is probably a much better idea to add separate classes like .employee-1 .employee-2 and so on. nth-child and nth-of-type only work when the elements are direct siblings of each other. So in your case they are wrapped in .crew-row and therefore nth-child(1) will select the first employee in each row...
The difference between nth-child and nth-of-type is simply that nth-of-type selects number n of a specific type. E.g.
<div class="crew-row">
<span class="employee"></span>
<div class="employee"></div>
<div class="employee"></div> <!-- trying to select this one -->
</div>
div:nth-child(2) { } /* Not working */
div:nth-of-type(2) { } /* Working */
If you still want to work with nth-child you can do it like this:
.crew-row:nth-child(1) .employee:nth-child(1) {} /* select first employee in first row */
.crew-row:nth-child(1) .employee:nth-child(2) {} /* select second employee in first row */
.crew-row:nth-child(2) .employee:nth-child(1) {} /* select first employee in second row */
/* and so on */
but again, probably better to just add classes .employee-[n] and assign backgrounds to these classes
<div class="employee employee-1"></div>
.employee.employee-1{
background-image: url('../images/people/1.png');
}
employee:nth-of-type(1){
background-image: url('../images/people/1.png');
}
In above code, employee:nth-of-type(1) specify a background for every <div> element with class name employee which is the first child of its parent.
So, with above code background of following div will be changed.
This is because all red marked div is the first child of it's parent.
You could combine html5, css and js to get that effect. you could stack them (html5 allows multiple background images stacked on top of each other) and using javascript or jquery - loop through each div and change the z-index of the stacked images. Or tie it to the scroll event and when the user scrolls past a certain poin, trigger the z-index change so that the next div has the modified background image.