I'm trying to make a quite simple CSS hover effect.
<div class="menu">
<div class="child"></div>
</div>
<div class="nav">
<div class="item1"></div>
</div>
What I woud like to happen, is that when you hover <div class="child"></div> it changes the element style of <div class="nav"></div> I've tried a lot of things like
.child:hover ~ .nav { }
But of course when I do this, it will search for a DIV with the class 'nav' inside the parent DIV '.menu', right?
I also tried
.child:hover .nav {
}
and
.child:hover + .nav {
}
I do feel a little bit stupid for asking this question, because the solution is probably pretty easy, but I have been trying to solve this problem for a few hours now...
using jQuery, you can use .hover() to add css to the nav div like below
$(document).ready(function() {
$('.child').hover(function() {
$('.nav').toggleClass('myStyle');
});
});
.myStyle {
background-color: lightgray;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
Menu Element
<div class="child">Child Element</div>
</div>
<div class="nav">
Nav Element
<div class="item1">Item 1</div>
</div>
Unfortunately, you cannot control a parent element using pure CSS.
jQuery is your best bet here, like:
$('.child').hover(function() {
$(this).parent().addClass('someClassForParentStyling');
}, function() {
$(this).parent().removeClass('someClassForParentStyling');
});
In your CSS, have the styling you want for the parent element set like:
.someClassForParentStyling {
background: #efefef;
}
Related
I am jQuery-phobic and new to css. So, please do not recommend to use jQuery.
I have two questions with my code.
[solved]When I click any one of .active divs, others go down. How to fix it on top?
How to change display from none to active as I click the div? (the code I wrote only show the div as long as I 'click' it)
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
.active:active > .hidden{
display: block;
margin : 0 0;
}
<div class = 'wrap'>
<div class = 'active'>
<h2>1</h2>
<div class ='hidden' onclick='layer_toggle()'>a</div>
</div>
<div class = 'active'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>
If the usual javascript function suits you.
function switch_active(e) {
if (e.querySelector('.hidden').style.display == 'none') {
e.querySelector('.hidden').style.display = 'block';
} else {
e.querySelector('.hidden').style.display = 'none';
}
}
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
<div class = 'wrap'>
<div class = 'active' onclick='switch_active(this)'>
<h2>1</h2>
<div class ='hidden'>a</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>
You can easily fix the vertical alignment by adding
"vertical-align: top;" to your ".active" class in your CSS.
You say you don't want to use jQuery. I don't know if you are also plain javascript-phobic but if not, I would suggest use simple javascript since that is the easiest way. If you want to keep focussing on CSS, one way to do it is to make them checkboxes or radio buttons (depending on the effect you are looking for), making the checkbox/radio button invisible and styling them as your divs.
Also, there is no reason to be jQuery-phobic. It can look a bit overwhelming but the basics are really not that difficult! :)
I am getting Test and Hello both in red color however I applied class2 only on 1st div.
Here is my code :
.class1 {
padding-top: 20px;
}
.class2 {
color:#F00;
}
<div>
<div class="class2">Test</djv>
<div class="class1">Hello</div>
</div>
I am new to CSS. Please help me understand this.
I found out that your first div is not closed properly i.e. </djv> by mistake you wrote DJV instead
You have used wrong </djv>
See in your code
.class1 {
padding-top: 20px;
}
.class2 {
color:#F00;
}
<div>
<div class="class2">Test</div>
<div class="class1">Hello</div>
</div>
I've looked around but can't find the right answer for this... How do I set an element to hover, assuming another is hovered?
Where Assuming "selector" is hovered, it will hover, box 1+2 etc...
http://jsfiddle.net/wgJRQ/
<div id="table">
<div id="row">
<div id="selector">selector 1</div>
<div id="selector2">selector 2</div>
</div>
<br />
<div id="row">
<div id="box1">box 1</div>
<div id="box2">box 2</div>
</div>
<div id="row">
<div id="box3">box 3</div>
<div id="box4">box 4</div>
</div>
Try something like
#box1:hover, #box1:hover~#box2 {
display: table-cell;
background-color:#FFFFFF;
border:2px solid #666666;
text-align: center;
vertical-align: middle;
}
Demo: Fiddle
jQuery:
$('#table > div:first > div')
.hover(function() {
$('#table').children('div')
.eq($(this).index() + 1)
.children('div')
.toggleClass('active');
return false;
});
http://jsfiddle.net/samliew/pyY5u/
You might want to optimize your hover states and reduce it to a single declaration, something like this:
#table > div:nth-child(n+1) > div {
border:2px solid #FFFFFF;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100px;
}
#table > div:nth-child(n+1) > div:hover,
#table > div:nth-child(n+1) > div.active {
background-color:#FFFFFF;
border:2px solid #666666;
}
#box1, #box2 {
background-color:#E07586;
}
#box3, #box4 {
background-color:#837C71;
}
With CSS you can only do it if the "target" element is inside the one being hovered.
In your case, you should change your layout to be arranged in columns instead of rows, so that you have box 1 and box 2 inside selector 1. That way you can change the look of box1 when you hover on its selector: .selector:hover .box1 {...}
If you cannot do this, then you will have to use Javascript.
Keep in mind that you cannot trigger :hover with Javascript, you will have to add a class to the boxes when the mouse enters the selectors, and remove the class when it exits them.
My code :
<div>
<div class='top-class'>
Header Name
</div>
<div class='body-class'>
This is body a
</div>
</div>
<div>
<div class='top-class'>
Another Header Name
</div>
<div class='body-class'>
Another body
</div>
</div>
css code I tried:
.top-class:hover + .body-class { display: block; } /* This is working */
But, I want that to happen when header is clicked. So, i tried this:
.top-class:visited + .body-class { display: block; } /* DIDNT work */
The pseudo class "active" seems to do the job
.top-class:active + .body-class { display: block; background-color: red; }
You can check my jsfiddle
You can use tabindex in you first div then it can have focus event on.
<div class='top-class' tabindex=1>Header Name</div>
Then in css you test focus pseudo class
.top-class:focus + .body-class { display: block; background-color: red; }
Check this jsfiddle
I have searched the web for this one but didn't find anything similar.
Say we have div A and div B. When hover on div A, div b should be visible ON (should look like overwriting) div A and not placed under.
It should appear like only the content of div A has changed to content of div B.
How can this be done in pure CSS and HTML?
#container > div {
display: none
}
#container > div:first-child {
display: block
}
#container > div:hover + div {
display: block
<div id="container">
<div>A</div>
<div>B</div>
</div>
This will work, but only if the two divs are adjacent and b follows a.
#a:hover + #b {
background: #f00
}
<div id="a">Div A</div>
<div id="b">Div B</div>
If you have divs in between use ~
#a:hover ~ #b {
background: #f00
}
<div id="a">Div A</div>
<div id="c">Div C</div>
<div id="b">Div B</div>
To go the other way around, unfortunately you will need Javascript
// Pure Javascript
document.getElementById('b').onmouseover = function(){
document.getElementById('a').style.backgroundColor = '#f00';
}
document.getElementById('b').onmouseout = function(){
document.getElementById('a').style.backgroundColor = '';
}
// jQuery
$('#b').hover(
function(){$('#a').css('background', '#F00')},
function(){$('#a').css('background', '')}
);
Full fiddle http://jsfiddle.net/p7hLL/5/
If you don't want to use the selector + or ~ which aren't compatible with some browsers, it is just possible if the <div /> to show (e.g. div#b) is a child of the <div /> to hover (e.g. div#a).
<div id="a">
<div id="b"></div>
</div>
<style>
div#b {
display: none;
}
div#a:hover div#b {
display: block;
}
</style>
Its works, but your css should be like this
<style>
#b{display:none;}
div#a:hover div#b{display:inline}
</style>