Change body bgcolor on hovering a div, using CSS only
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}
CSS change body background-color on button hover?
It's not possbile in CSS. In JavaScript it's quite easy, you're looking for onmouseover/out
events.
var button = document.getElementById('hover');
var body = document.body;
button.onmouseover = function() {
body.className = 'hovered';
}
button.onmouseout = function() {
body.className = '';
}
body {background: #000;}
body.hovered {background: #ff0;}
<button id="hover">button</button>
Change body background color on hover
$(document).ready(function(){
$('img').mouseover(function(){
$('body').css('background-color',$(this).data('color'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="projects-list home-1">
<article class="whispers">
<h1>Whispers</h1>
<figure>
<a href="/projects/whispers.html">
<img class="img" src="https://picsum.photos/200/200?random"alt="Sample Image" data-color="pink">
</a>
</figure>
</article>
<article>
<h1>Victoria</h1>
<figure>
<a href="projects/after-august.html">
<img src="https://picsum.photos/200/200?random"alt="Sample Image" data-color="grey">
</a>
</figure>
</article>
<article>
<h1>for sasha</h1>
<figure>
<a href="projects/for-sasha.html">
<img src="https://picsum.photos/200/200?random"alt="Sample Image" data-color="red">
</a>
</figure>
</article>
<article>
<h1>old and blue</h1>
<figure>
<a href="projects/old-and-blue.html">
<img src="https://picsum.photos/200/200?random"alt="Sample Image" data-color="green">
</a>
</figure>
</article>
<article>
<h1>offf barcelona</h1>
<figure>
<a href="projects/offf-barcelona.html">
<img src="https://picsum.photos/200/200?random" alt="Sample Image" data-color="blue">
</a>
</figure>
</article>
</div>
</body>
Changing body background when hovering over a link
What you want to do is actually not possible with CSS as you are asking if there is a parent selector BUT we can use some workarounds.
Here is an idea where I use a pseudo element from the a
that I make it to cover the whole body and it behaves as the background of the body:
a {
color: white;
text-decoration: none;
}
a:before {
content: "";
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #000;
z-index: -1;
pointer-events:none;
}
a:hover::before {
background: red;
}
<a href="#">link</a>
div background color, to change onhover
The "a:hover
" literally tells the browser to change the properties for the <a>
-tag, when the mouse is hovered over it. What you perhaps meant was "the div:hover
" instead, which would trigger when the div was chosen.
Just to make sure, if you want to change only one particular div, give it an id ("<div id='something'>
") and use the CSS "#something:hover {...}
" instead. If you want to edit a group of divs, make them into a class ("<div class='else'>
") and use the CSS ".else {...}
" in this case (note the period before the class' name!)
Using CSS only: change a div's background color on hover
You should put the <a>
inside the <div>
. If you want it to stretch across the full space, add display: block
to its style.
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>We have a range of Education Facilities available for lease and hire</p>
</a>
</div>
a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }
div hover background-color change?
.e:hover{
background-color:#FF0000;
}
Can I change the background-colour of an element, when hovering over another?
Using pure CSS: Add a tilde character in between the hover and target element to identify the effected element you wish to change on hover. In CSS, the symbol tilde(~) is know as Subsequent-sibling combinator
.
MDN General sibling combinator
#cont {
display: flex;
justify-content: space-around;
}
.el1 {
height: 200px;
width: 200px;
background: #eee;
}
.el2 {
height: 200px;
width: 200px;
background: #ff0;
}
.el1:hover~.el2 {
background: #f00;
color: #fff;
}
<div id="cont">
<div class="el1"></div>
<div class="el2"></div>
</div>
Related Topics
Is There a CSS "Haschildren" Selector
Can CSS Identifiers Begin with Two Hyphens
Alternate Color Dot Over the Letter I
Limit the Width of a Column to the Width of a Particular Grid Item
Switching to Em-Based Media Queries
How to Use Bootstrap Modals Without Loading the Entire Library
How to Standardize the Height of a Select Box Between Chrome and Firefox
Use Transition on ::-Webkit-Scrollbar
CSS Change Custom Cursor Image Origin (Hotspot) to Center
Fieldset Firefox Overflow CSS Fix
Why Is This Non-Float Margin Collapsing with a Float
How to Remove the Blue Highlight of Button on Mobile
Inject CSS with Chrome Developer Tool
Horizontally Centering/Evenly Distributed <Li> Inside of <Ul> Inside a <Div>