Trying to change a div background color when hover over another div. But I can't get it to worked. Been seing aroud her now, but can't find a similair question.
<style type="text/css">
#main {
width: 960px;
height: 600px;
margin: auto;
position: relative;
background: red;
}
#trykk {
width: 100px;
height: 100px;
background-color: yellow;
}
#trykk:hover #main {
background-color: green;
}
</style>
<div id="main">
<div id="trykk">
</div>
</div>
Thats the code I've been using. The only problem is that I'm not allowed to use javascript. So is there any way I can change background color on div #main when I hover over div #trykk?
A demo related to Rodik's answer, as he said you cannot change select parent using a child hence you cannot change the style of parent element, but if you want you can change your markup, as you said you cannot use javascript but if you can change the markup than it will go like this
Demo1
HTML
<div id="main">Main</div>
<div id="trykk">Trykk</div>
CSS
#main:hover + #trykk {
background-color: green;
}
Or if you want to nest your div's as you are doing right now, just change the selector like this
Demo2
HTML
<div id="main">Main
<div id="trykk">Trykk</div>
</div>
CSS
#main:hover > #trykk {
background-color: green;
}
CSS selection only works one way, from parent to child.
A child's state, hence, cannot affect it's parent's state.
A javascript mouseover event will be needed to implement this type of functionality.
with jquery you could do this:
$(function(){
$("#trykk").hover(function(){
$("#main").toggleClass("greenBackground");
});
});
Related
Here I'm trying to change the CSS variable's value (visibility) when the button is clicked on (using :focus) to show/hide the images, without using Javascript.
CSS
img {
width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
--c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
visibility: var(--c1-vsb);
}
a.c2-imgs {
visibility: var(--c2-vsb);
}
#C1:focus {
background-color: red;
--c1-vsb: hidden;
}
#C2:focus {
background-color: red;
--c2-vsb: hidden;
}
HTML
<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>
But for some reasons, when I clicked on the button to set visibility to hidden, the images do not get hidden away.
Previously, I tried hiding the images with css pseudo classes and display:none, z-order... but got stuck. In the end, I thought this should have been the simple way out.
Could you suggest a solution to this problem I'm having? I'm not too sure if this is the correct approach.
Thank you!
When you declare #C1:focus { --c1-vsb: hidden; }, the new value of --c1-vsb only applies to #C1, not the entire HTML document.
As MDN states: "[...] the selector given to the ruleset defines the scope that the custom property can be used in".
With css, you can only Show/hide with mouse handle. You don't change 2 state (Show/Hide) when click into button.
JSFiddle
When you click the button, you see that :active pseudoclass is triggered for the parent div. Is there a pure CSS (or some JS library) way of :active pseudoclass not toggling on button click?
I tried z-index, position: absolute & fixed and no success.
From the spec:
Selectors doesn't define if the parent of an element that is ‘:active’ or ‘:hover’ is also in that state.
That means it's implementation dependent. If an implementation chose to act this way (as current browsers obviously do), there's nothing in the standard that can change that.
With CSS4, you might be able to do:
.parent:active:not(:has(:active)) {
color: red;
}
but that is neither available nor finalized yet.
If you really want to solve this with CSS only:
If your button is active, add a :before-pseudo-element and with position: absolute; give the :before the same background as the parents.
button:active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #eee;
z-index: -1;
}
Now all that is needed is that the parent is :
position: relative;
z-index: 0;
Have a look: http://jsfiddle.net/s0at4w4b/4/
This does not solve the underlying issue, but is a solution for your current problem.
I don't think :has pseudo-class will ever be available in stylesheets. If browsers finally decide to implement it, it will probably be only for JS APIs like querySelector.
However, I have much more hopes for :focus-within, which seems much simpler to implement.
#parent:active:not(:focus-within) {
background-color: red;
}
Of course, it will only prevent :active from being applied to #parent when clicking a focusable element like a button. You can make other elements focusable by adding tabindex = "-1"
Sadly, :focus-within is not widely supported, but you can use a JS polyfill.
#parent {
border: 1px solid black;
width: 300px;
height: 300px;
}
#parent:active:not(.focus-within) {
background-color: red;
}
<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div id="parent">
<button>Click me</button>
<p tabindex="-1">Or me</p>
</div>
Github does not allow hotlinking, so the snippet above might not work unless you copy the polyfill to your server and use it.
Perhaps the simplest way of achieving what you probably really want to do is to put not put the button inside the div you don't want activated.
Here, you have a container div, which contains a background div (the equivalent of the parent div in your original example). The background div has an active state separate from the button's.
.container {
position: relative;
width: 200px;
height: 200px;
}
.background {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
background-color: #eee;
}
.background:active {
background-color: red;
}
button {
position: relative;
}
<div class="container">
<div class="background"></div>
<button>Click me!</button>
</div>
This may or may not work for you, but this is how I achieve it with pure CSS. The only caveat is the dependence of focus-within which isn't supported by IE or Edge.
.parent {
transition: background-color;
}
.parent:active:not(:focus-within) {
background-color: red;
transition-delay: 1ms; // Delay one cycle to allow child to focus
}
What's going on here is, the parent element will get the active state, as will the child that gets clicked. The only difference is that the focus will apply to the child element, but only on the next cycle. To circumvent any animations from while in this 2 step process, apply a 1ms delay. The next cycle, the element will be active, but the focus will be applied to the child. Thus, the parent will not apply the transition. I would imagine animation delay: 1ms would work the same way.
Another alternative is to give the item a tabindex=-1 attribute and use
.parent {
transition: background-color;
}
.parent:active:focus {
background-color: red;
}
The only issue with this is the fact it may change keyboard navigation behavior and relies on some HTML as well. If you do want keyboard navigation use tabindex=0 or any value besides -1. But there's no JS used.
There are some nice polyfills for focus-within that you can use for IE/Edge but that would go outside "CSS Only".
But, we can put both of them together to create this:
.parent {
transition: background-color;
}
.parent[tabindex]:active:focus {
background-color: red;
}
.parent:active:not(:focus):not(:focus-within) {
background-color: red;
transition-delay: 1ms;
}
This works on IE11, Edge, and Chrome.
http://jsfiddle.net/s0at4w4b/42/
here's a jquery solution instead of using the css pseudo class :active
$(document).ready(function() {
$('button').mousedown(function(e){
e.stopPropagation();
console.log('i got clicked');
});
$('div').mousedown(function(e){
$('div').css('background', 'red')
}).mouseup(function(e){
$('div').css('background', '#eee')
});
$(document).mouseup(function(e){
$('div').css('background', '#eee')
});
});
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Qlick me</button>
</div>
As far as I know, the the active state will bubble up. So all parent nodes will have an active state.
Therefore, I don't now of a pure CSS solution. You can avoid a javascript solution (which I assume is what you're really after), by altering the markup so that the div that has an active state is no longer a parent of the button. You can make them siblings, for example.
The CSS part of that solution is then fixing the layout so it appears the same now that they are sibilings as what it did when they were parent>child.
Without seeing a fiddle of what you're working with, I can't offer you a more specific solution I'm afraid.
try this
html:
<div class="current" id="current">
<button id="btnclick" >Qlick me</button>
</div>
css script:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.current_active{
background-color: red;
}
jquery:
$("#btnclick").click(function(){
$("#current").toggleClass("current_active");
});
JSFiddle
ps: include the jquery library file
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
There may be document language or implementation specific limits on which elements can become :active. For example, [HTML5] defines a list of activatable elements.
The parent of an element that matches :active also matches :active.
So there,s no way
Instead of div:active {...} you should code div:active:not(:hover) {...} and the background-color stays untouched.
(old snippet removed)
UPDATE
To keep the main div behaviour intact and a more generic approach I usually create several layers.
Check the snippet below, toggling to green is just to prove that it works while position and abolute are just quick and dirty for now:
#layer-data {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
#layer-data:active {
background-color: red
}
#layer-btns:active {
background-color: green
}
#layer-btns {
z-index: 1;
position: absolute;
top: 1px;
left: 1px;
background: transparent;
padding: 5px;
width: auto;
height: auto
}
#layer-data {
z-index: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 200px
}
<div id="layer-btns">
<button>Qlick me</button>
<br/>
<button>Qlick me too</button>
<br/>
<button>Qlick me three</button>
</div>
<div id="layer-data">
some data-layer
</div>
There doesn't seem to any CSS way to handle this case. (not sure about CSS4, the way Amit has suggested.) So here is JQuery way.
The idea is you handle mousedown and mouseup events at 3 levels:
the parent div
the button where you don't want the active state propagated to parent div (".btn1" in the example below)
any other children except the button in second condition. (".btn2" in the example below)
JS Fiddle
HTML:
<div>
<button class="btn1">Qlick me1</button>
<button class="btn2">Qlick me2</button>
</div>
JQuery:
$(function(){
$('div').each(function(e){
$(this).mousedown(function(e){
$(this).addClass("activeClass");
}).mouseup(function(e){
$(this).removeClass("activeClass");
});
});
$('div .btn1').each(function(e){
$(this).mousedown(function(e){
e.stopPropagation();
}).mouseup(function(e){
e.stopPropagation();
});
});
$('div :not(.btn1)').each(function(e){
$(this).mousedown(function(e){
$(this).parent().addClass("activeClass");
}).mouseup(function(e){
$(this).parent().removeClass("activeClass");
});
});
});
CSS:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.activeClass {
background-color: red;
}
CSS pseudo-elements are incredibly useful -- they allow us to create CSS triangles for tooltips and perform a number of other simple tasks while preventing the need for additional HTML elements. To this point, these pseudo-element CSS properties have been unreachable by JavaScript but now there's a method for getting them!
Check this:
http://davidwalsh.name/pseudo-element
http://davidwalsh.name/ways-css-javascript-interact
I would like to change the background image of a div by hover a button. This is my key:
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
I dont really know how to do it, I hope you help me!
Best regards!
It's pretty hard to do just with css. You probably could use some javascript to do that. But, I found a way to do what you want if your div was an immediate sibling of your button (with no other elements between the two).
The code would look like this:
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
The operator "+" or "~" will apply the css to the next sibling element.
Here's a JS Fiddle that show you the tricks.
If you just remove the "+" it will apply the css to descendant/child of the left element. For more information you can check out this page.
I think that you want to change .content-portfolio's background when you hover on event-button right? You get it right by giving the button an id and not a class, but you can't affect other elements with css selectors if they're not related in some way. Alternatively, it's easier to affect other elements if they have ids instead of classes, specially if they don't have any kind of hierarchy. You'll need to use a javascript solution for this (fiddle here):
HTML:
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS:
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript:
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
In this approach I changed your id names so I can refer to them directly, instead of using the document.getElementById, but if your name contains dashes - or if this doesn't work on your browser, you should use the before mentioned function.
try this
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS: here is the fiddle[ http://jsfiddle.net/somdow/d2Yf9/ ]
,the images are from my own website, obviously just change the url to your own.
Edit: Essentially, from the code i added, you dont need any of it, all you need to do is the same thing you did, just change the url on the hover and you are set to go.
Perhaps you want to change background image of .content-portfolio this is the way to do it:
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
see this: http://jsfiddle.net/y8tRd/
You need jQuery.
Create two classes and add two jquery methods to your button. One css class with the hover image and another class without.
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
You can do something like this (You will need jquery):
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
Also you can create two classes with different backgrounds, and you can add or remove class through jquery
Notice that I need to declare the img source from the html (this will be dynamic), so i dont use background here.
HTML
<div class='some-form'>
<form>
<button>...<button>
<img id="some-img" src="something"/>
<input id="some-input"/>
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
z-index: -1;
//background-size: contain; //this does not work
//background-position: center right 50px; //so this will not work
}
How can I get the image to act like contain so that I can align it the way i want?
Keep your code as-is, but change #some-img from an img to a div (and specify width and height as needed based on the image dimensions). It's not possible (at least not in a simple way) to make an img element behave as if it was using background-size and background-position properties since img elements are not backgrounds. So in order to do so, you instead make the image a div with a background-image.
Since you are dynamically populating the image src, you can instead use inline styles to define a background-image on the div, as this lets you call a PHP or other server-side function to echo the image url (which you can't do in a CSS file).
So for example, keep the CSS you have now (but add height/width or other styles to the #some-img div as needed) but replace <img id="some-img" src="something"/> with something like this:
<div style="background-image: url(<?php theDynamicImageURL(); ?>);"></div>
or equivalent in whatever language or method you are using to populate the image dynamically.
There are better ways to do this as inline CSS is generally something that should be avoided, but the use in this case is not too dangerous but it'll work in a pinch and most other methods would either be equally sloppy or a lot more work.
If you include jquery, you can write a script to cheat this:
<script type="text/javascript">
height = $('#some-img').height();
width = $('#some-img').width();
src = $('#some-img').attr('src');
$('#sime-img').wrap('<div id="contain"></div>');
$('#contain').height(height).width(width);
$('#contain').css('background',"url('" + src + "')");
$('#contain').css('background-sizing','contain');
$('#some-img').css('opacity','0');
</script>
It isn't nice. You can do the same thing w/o JQuery, I just used it for convenience.
If I understand correctly, you're looking to constrain an image to the size of its containing element and center it vertically and horizontally.
This will get you pretty close, but the image will only scale up to its actual size, no bigger.
HTML
<div class='some-form'>
<form>
<button></button>
<img id="some-img" src="http://lorempixel.com/300/200/sports"/>
<input id="some-input" />
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
width:400px;
height:180px;
background: rgba(255,255,0,.1); /* for checking that it fits*/
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
max-width:100%;
max-height:100%;
z-index: -1;
}
fiddle: http://jsfiddle.net/XNR38/
Good luck!
I have some links, and each of these have a unique href.
lets say link one have href="#first".
and link two have href="#second".
What would then be the CSS to do something with a div? (with the ID box)
I have tried lots of things like:
#first:target #box{
something..
}
#second:target #box{
something else..
}
#linkOne:hover #box{ width:200px; }
This changes the size of #box by hovering #linkOne I want the same to happen with :target, like change the size of #box by clicking the link
If you want to select the currently targeted element, you can simply do :target
html
first link
second link
<div id="first">first div</div>
<div id="second">second div</div>
css
:target {
border: 1px solid red;
}
The div with the corresponding id of the link clicked will have a red border.
http://jsfiddle.net/wk3rR/2/
UPDATE
Judging by your comment, it appears you want to manipulate the same box with different current targets, which won't be straight-forward, but can be done if you nest the <div>s with the IDs and then your original css should work:
first link
second link
<div id="first">
<div id="second">
<div class="box">box</div>
</div>
</div>
css
#first:target .box {
border: 1px solid red;
}
#second:target .box {
border: 1px solid yellow;
}
http://jsfiddle.net/wk3rR/3/
If I am not wrong, you are looking for something like the below. This will set the height of the currently targeted element to 20px. Transition effect will also be applied.
HTML:
<a href='#first'>First</a>
<a href='#second'>Second</a>
<div id='first'>This is first div</div>
<div id='second'>This is second div</div>
CSS:
#first, #second {
height: 0px;
overflow: hidden;
transition: height 1s ease-in;
}
#first:target {
height: 20px;
}
#second:target {
height: 20px;
}
Demo Fiddle
EDIT: I know you haven't tagged jQuery/JavaScript and was looking for a CSS solution. But if you have many such links and are ok to have a JS based solution, you can try the below.
This script has a mapping between the id of the link that is clicked and the height that the box is supposed to have when the link is clicked. Based on it, the #box element's height is modified. Transitions will also work as can be seen in this fiddle.
window.onload = function () {
document.getElementsByTagName('body')[0].onclick = function(e){
var box = document.getElementById('box');
var heights = { first: '20px', second: '40px', third: '30px' };
if(e.target.id)
box.style.height = heights[e.target.id];
};
}
I think you need the use of javascript if you want manipulate DOM. You have to remember CSS is only for style the page, not for making actions with the elements.