I want to hide a div con1 when i hover div con2 and vice versa. I am able to hide con2 when i hover con1 but can't do the same vice-versa. Why it is not working when i hover con2 to hide con1.
Below are the codes:
<html>
<head>
<title>Home</title>
<style type="text/css">
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#con2:hover ~#con1{
display:none;
}
</style>
</head>
<body>
<div id="con1">
</div>
<div id="con2">
</div>
</body>
</html>
Example: http://jsfiddle.net/mendesjuan/s8bbe/
I believe this is not possible with the general sibling selector as it only applies to elements after it in the html-structure. See more: http://css-tricks.com/child-and-sibling-selectors/
A possible (althought not especially elegant solution):
http://jsfiddle.net/s8bbe/4/
<div id="wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#wrapper:hover #con1:not(:hover){
visibility:hidden;
}
Example: http://jsfiddle.net/s8bbe/5/
#KnutSv's solution is great. Here's an add-on if using more than 2 divs.
<div id="con-wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
<div id="con3">
</div>
</div>
And a one-line css with :hover, :not(:hover).
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con3{
float:left;
width: 500px;
height: 300px;
background: #606;
}
#con-wrapper:hover > div:not(:hover) {
visibility: hidden;
}
Using "> div" will target all #con-wrapper direct div children, which are not hovered, and hide them.
Use #con-wrapper:hover > div[id^=con]:not(:hover) if only cons needed to be targeted.
Putting the divs in one container div you can hide all contained divs on hoover, but not the actually 'hovered over' one with:
div:hover div {
visibility: hidden;
}
div:hover div:hover {
visibility: visible;
}
See demo: http://jsfiddle.net/TcPJZ/3/
EDIT: It actually works well for arbitrary number of divs (see demo).
Maybe you are using wrong selectors
try this
.con2:hover ~ div {display:none}
But this is "Hard code" if you will want to add more divs before con-2 they will be dissappearing too
I try it on jsfiddle and I get the problem.
When you have this:
<div id="con1">
</div>
<div id="con2">
</div>
Hover on "con1" works, but when you change the positions:
<div id="con2">
</div>
<div id="con1">
</div>
Now it's "con2" which is working and now not "con1".
So , I don't know how to fix it, but I can tell you about make it by Javascript/Jquery.
I think that can be solve the problem.
CSS doesn't support previous sibling selection. If you still want to have a previous sibling selector then you should look in to javascript.
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
function displayElem(el, property, value){
el.style[property] = value;
}
con1.onmouseover = displayElem.bind(null, con2, 'display', "none");
con1.onmouseout = displayElem.bind(null, con2, 'display', "");
con2.onmouseover = displayElem.bind(null, con1, 'visibility', "hidden");
con2.onmouseout = displayElem.bind(null, con1, 'visibility', "");
Working Fiddle
In the above fiddle, I even moved the next sibling selection to javascript so that to let you keep the code structured. if you don't want to do so, then happily don't events to the first element :)
it will be easily done by using below code using jquery , why you depend only on css
$("#con1").hover(function(){
$("#con2").css("visibility","hidden");
},function(){
$("#con2").css("visibility","visible");
});
here is the working sample http://jsfiddle.net/5jRXm/
Related
Good afternoon,
I'm struggling to get my hover over box to change the color of the <a> tag and change the <img> tag.
However, The <p> tag does change when I hover over it.
I have inserted all of them under one parent div tag.
Is there a way to make this work?
Cheers,
Anrich Vigus
Try this
.divClassOrId:hover{
background-color: red;
}
If I don't understand it, you want to define a feature for a label. For this you need to do operations from css. I'll throw you a sample code like this.
<html>
<head>
<style>
div:hover {
background-color: yellow;
}
div{
background-color: green;
width : 500px;
height: 500px;
}
</style>
</head>
<body>
<div>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
</div>
</body>
</html>
If you try to hover a div and highlight just another one:
HTML:
<div class="class">
<div class="childClass">Test</div>
</div>
CSS:
.class:hover + .childClass {
background-color: blue;
}
.childClass {
background-color: red;
}
This will Modify the Child if the parent is hovered
Alternatively you can use:
.class:hover ~ childClass {
backgroud-color: blue;
}
I have html script like :
<html>
<head></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
then I want to access the div by url, if url is:
example.com#div1
I want to hide div2 and if url is:
example.com#div2
then I want to hide div1
How do I solve that with css?
It is possible through CSS using pseudo selector
<html>
<head>
<style type="text/css">
.my-div {
background-color: green;
display: none;
height: 100px;
width: 100px;
}
.my-div:target {
display: block;
}
</style>
</head>
<body>
<div id="div1" class="my-div">Div 1</div>
<div id="div2" class="my-div">Div 2</div>
</body></html>
Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page
I did this recently, don't think you can do with CSS only.
this will load correct div on page load, including when the user uses back in browser.
<script>
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
changeTab(hash);
}
else {
changeTab('div1');
}
});
function changeTab(divNo) {
$('.divclass').hide();
$('#' + divNo).show();
window.location.hash = '#'+divNo;
}
</script>
if you use a button to change divs just use:
onclick="changeTab('div1');"
set your div's class attribute to a type like 'divclass'
How to target outer div based on url?
The CSS pseudo-class :target is perfectly suited to this:
div {
float:left;
width: 300px;
height: 150px;
}
#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}
#div1 {
background-color: rgb(255,0,0);
}
#div2 {
background-color: rgb(0,0,255);
}
#div1:target, #div2:target {
display:block;
}
<div>
<p>Display Div1 (but not Div 2)</p>
<p>Display Div2 (but not Div 1)</p>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
I have the following html:
<div class="mydiv">
<p>some text here</p>
<input type='text' />
</div>
...with the following CSS:
.mydiv {
background-color:yellow;
}
.mydiv:focus, .mydiv:hover {
background-color:orange;
}
The :hover is changing the background color appropriately, but the :focus is not having any effect. Is this because the <div> cannot truly have focus?
Is there a CSS solution to make .mydiv change background color when any of its children receive focus?
Here's a fiddle.
There is no CSS solution for this. But, you can achieve this by using jQuery.
$(".mydiv").children().focus(function() {
$(this).parent().css("background-color", "orange");
}).blur(function() {
$(this).parent().css("background-color","yellow");
});
Here is the Fiddle
You have to add the tabindex attribute to the element needs to be focusable.
Here is the Fiddle
But, to answer your question, there is no pure CSS solution to make the div bg color change if its children receive focus.
When using jQuery, I think you're better off using the focusin and focusout events.
The code as adapted from the accepted answer would then become:
$(".mydiv").focusin(function() {
$(this).css("background-color", "orange");
}).focusout(function() {
$(this).css("background-color","yellow");
});
though, personally, I'd rather use a "focus" class:
$(".mydiv").focusin(function() {
$(this).addClass("focus");
}).focusout(function() {
$(this).removeClass("focus");
});
combined with the css for the combined selector:
.mydiv.focus { background-color: orange }
p.s. For once, I find the bit of docs on w3schools more informative than the demo on api.jquery.com, which just looks confusing to me.
Possible CSS solution:
<style>
#row1 {display: block; position: relative; width: 100%; background-color: #ffffff; z-index: 150;}
.BGmagic {display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #efefef; z-index: 200;}
#inputone{display: block; position: relative; z-index: 250;}
#inputone:focus + .BGmagic {display: block;}
#inputone:hover + .BGmagic {display: block;}
</style>
<form>
<div ID="row1">
<p style="position: relative; z-index: 250;">First name:</p>
<input ID="inputone" type="text" name="firstname">
<div class="BGmagic"></div>
</div>
</form>
I have this HTML code:
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
You need the attr CSS function:
div {
width: attr(data-width);
}
The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):
You cant pass data attribute value directly in to css without pseudo type content.
Rather you can do this way.. CHECK THIS FIDDLE
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}
.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}
<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
jsFiddle
I'm just having fun with this, but a jQuery solution would be something like this:
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
KIND OF AN UPDATE
Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
HTML
<div data-width='70'>Blue</div>
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
<div data-width="70"></div>
use `attr()` to get the value of attribute;
div {
width: attr(data-width);
}
can you try this
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});
What is the correct way to select a link of a certain class within a body of specific class. For example my body has the class "abc" and my link has the class "efg", what would my css code look like? (I'm trying to create active links for a Magento block)
body.body_class a.link_class
This question is a bit basic - you should try to learn this stuff a bit.
You have to do some research
body.abc a.efg {
rules
}
even w3c can help you with that
You should write something like this:
.abc .efg {
/*Your CSS Rules*/
}
SEE DEMO
Check this example
<html>
<head>
<style>
.outer
{
background-color: red;
height: 40px;
margin: 10px;
}
.inner
{
background-color: blue;
height: 20px;
margin: 5px;
}
.outer .inner
{
background-color: green;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="inner">
</div>
</div>
<div id="mydiv" class="outer">
<div id="mydiv" class="inner"></div>
</div>
</body>
</html>
Save the above code in an html file and open it.