I have 2 separate div tags. I want div2 to appear when someone hovers over div1.
This is what I am trying to achieve..
HTML
<div class="div1">
HOVER TO ADD DETAILS
</div>
<div class="div2">
<input type="image" src="img1.png" name="btn1" value="btn1">
<input type="image" src="img2.png" name="btn1" value="btn1">
<input type="image" src="img3.png" name="btn1" value="btn1">
</div>
CSS
.div1{ background-color:#bcbcbc; width: 400px; height:45px;}
.div2{ display:none; position:relative; width: 50px; margin:0 auto;}
.div1 > .div2 {display:block; }
This is what I am trying.. It is not working. I am not able to show div2 when I hover div1. I've searched over the net but not able to find what I want. any idea how to do this. I would appreciate a css way of doing it. Thanks in advance..
Make .div1 the child of .div2 like:
<div class='div1'><div class='div2'>...</div></div>
And then the CSS:
.div2 {
display: none;
}
.div1:hover > .div2 {
display: block;
}
.div2:hover {
display: block;
}
And also add your CSS.
Try:
.div1:hover + .div2 {display:block; }
Try this
.div2 {
display: none;
}
.div1:hover ~ .div2 {
display: block;
}
.div2:hover {
display: block;
}
Also it is better to use IDs like #div1 and #div2 as classes are to specify a style for more than one elements.
.div1 {
background-color:#bcbcbc;
width: 400px;
height:45px;
}
.div2 {
display:none;
position:relative;
width: 50px;
margin:0 auto;
}
.div1:hover~.div2{
display: block;
}
Try this(it fixes the flickering issue and you can interact with the second div as well):
.div1 {
z-index:1;
}
.div1:hover {
z-index:0;
}
.div2 {
z-index: 0;
}
.div2:hover {
z-index:1;
}
DEMO
(this basically switches the z-indices of the two divs when you hover over .div1)
You should get the effect by using ~ like so:
.div1:hover ~ .div2 { display: block; }
Related
I want to put two images in one div. One remains up and other goes down. Both take around 25% width:-
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg"/>
</div>
</div>
CSS:
.images {
float: left;
width: 25%;
}
.pics {
float: left;
width: 12%;
margin: 0%;
}
images_img {
width: 100%;
}
Try this out using display:inline-block
CSS
.images {
display: inline-block;
width: 25%;
}
.pics img{
display: inline-block;
width: 100%;
}
DEMO HERE
Do you want the pics side by side? You only need one line of css:
.pics { display:block; float:left; }
http://jsfiddle.net/ve9ud2o4/1/
Or if you want the image container div to be 25% and the pictures to span the div you could do:
.images { background:red; display:block; float:left; overflow:hidden; width:25%; }
.pics { background:green; display:block; float:left; width:50%; }
.pics img { border:1px dotted black; display:block; width:100%; }
http://jsfiddle.net/ve9ud2o4/2/
Remember that .pics width is relative to it's container. So even though the .images div is 25%, if you want a pic to be half of that you set the .pics width to 50%
you can use display:block; to prevent line breaks and display elements in same line
Of course you can ajust your div width to fit the two images and float them as you wish
I've been trying to figure this out for a long time and I can't seem to get it. I have the following HTML:
<div class="b">
<button>Show when I hover</button>
</div>
<div class="A">When I hover over this the background should change</div>
with the corresponding CSS:
.b {
float: right;
display: none;
}
.A {
float: left;
display: inline;
width: 1000px;
}
.A:hover {
background: gray;
}
.A:hover + .b {
display: block;
}
What I'm trying to do is whenever I hover over A the b div and corresponding button should show. In addition, I want it such that when my mouse is on the button, the background of A is still gray as if I was hovering over it. I can't seem to figure this out. Any ideas?
Relevant JSFiddle: http://jsfiddle.net/sn19k1wz/3/
You can do this by changing position of A and B
<div class="A">When I hover over this the background should change</div>
<div class="b">
<button>Show when I hover</button>
</div>
Change the div positions, hovering div tag should be the first one
Like this :
<div class="A">When I hover over this the background should change</div>
<div class="b">
<button>Show when I hover</button>
</div>
Demo URL
Try like this: Demo
.A {
display: inline-block;
width: 1000px;
position: relative;
}
.b {
display: none;
position: absolute;
z-index: 999;
right: 0;
top:6px;
}
.A:hover {
background: gray;
}
.A:hover + .b {
display: block;
background: red;
cursor:pointer;
}
In a webpage i have following markup for my layout
<div class="parent">
<div class="left-content"></div>
<div class="right-content"></div>
</div>
and the styles for the given markup are:
.parent{
display:table;
width:100%;
}
.parent > .left-content{
width:auto;
}
.parent > .right-content{
width:320px;
}
How do I make the "right-content" occupy 320px of available width and the "left-content" div occupy all the remaining width?
Note that: i can not use the following technique to achieve this behaviour as my layout is responsive and i need to move the "right-content" to the bottom of "left-content" at specific resolution.
Markup:
<div class="parent">
<div class="right-content"></div>
<div class="left-content"></div>
</div>
Styles
.parent{
display:block;
width:100%;
}
.parent > .left-content{
width:auto;
}
.parent > .right-content{
width:320px;
float:right;
}
To make things easier I would first change the markup so you have the left content is below your right-content (as desired on smartphone-resolutions).
<div class="left-content"></div>
<div class="right-content"></div>
Next, because your first div is the one that takes up remaining width, the simple solution seems to be display:table-cell (and the parent as display:table). It looks doable with inline-blocks or floats as well, but you may have to resort to something like width: calc(100% - 320px); so I like the table solution a little bit more.
Next you add a simple media query to change back to blocks on lower resolutions.
.parent {
display: table;
width: 100%;
}
.parent > .left-content {
display: table-cell;
width: auto;
/* Added for visualisation */
background: blue;
height: 50px;
}
.parent > .right-content {
display: table-cell;
width: 320px;
/* Added for visualisation */
height: 50px;
background: red;
}
/* Media query */
#media(max-width: 550px) {
.parent > .left-content {
display: block;
}
.parent > .right-content {
display: block;
width: 100%;
}
}
<div class="parent">
<div class="left-content">Left</div>
<div class="right-content">Right</div>
</div>
I would strongly suggest using calc rather than forcing your markup to behave like a table.
http://sassmeister.com/gist/c87585fcff7fae356adb
.left-content,
.right-content {
width: 100%;
}
#media (min-width: 600px) {
.left-content {
float: left;
width: calc(100% - 320px);
}
.right-content {
float: right;
width: 320px;
}
}
So in FireFox / IE for some reason, my hover keeps blinking, I'm not quite sure why. Is it just better to do my hovers in javascript or is there an easier fix in CSS? Here's a JSFiddle to show what i mean - http://jsfiddle.net/eRBCa/
HTML
<div>
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#div1:hover + #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}
It seems (without getting in to much technical details), that the :hover selector works differently in Chrome than in Firefox or IE. Namely, when #div2 gets visible, it becomes the "hovered" element and #div1 loses the 'hover' "attribute" (in FF or IE). That's what causes the flickering.
You could fix that by changing your CSS like this:
#div1:hover + #div2,
#div2:hover {
display: block;
}
See, also, this short demo.
The jitter effect is created because once you display the overlay, your mouse is now hovering the overlay instead of the original (#div1). You can fix this by looking at whether the parent element is hovered instead.
/* instead of #div1:hover + #div2, where .container is a class on the parent */
.container:hover #div2 {
display: block;
}
http://jsfiddle.net/eRBCa/1/
You can do something like this:
http://jsfiddle.net/eRBCa/4/
HTML
<div>
<div id="div1">
<div class="content">
content here
</div>
</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
position:relative;
}
#div1:hover{ background-color:red; }
#div1:hover .content {display:block; }
.content {display:none; position:absolute; top:0; left:0}
You should call action earlier in html.
Once you hover div1, div2 comes on top, so you hover div2 and they are adjacent.
http://jsfiddle.net/GPCh3/
<div id="call">
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#call:hover #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}
I want to show second div (in HTML) with class dikha on cursor hover over anchor tag.
HTML CODE:
<a>Hover over me!</a>
<div class="faraz"> sdjfg </div>
<div class="dikha">Stuff shown on hover</div>
STYLE
div {
display: none;
}
a:hover > div:nth-child(2) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
Write like this:
a:hover ~ .dikha {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
You need to use the adjacent siblings selector ~. Also, the div you want to show is the third child, not the second (because the <a> is the first).
div {
display: none;
}
a:hover ~ div:nth-child(3) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
Demo: http://jsfiddle.net/3eFhf/
you can use javascript function here.
< onmouseover="document.getElementById('myid').style.display='block'">
< id="myid" class="dikha">
Your dikha class should be hidden by default
.dikha { display:none; }
you can also use jquery slidetoggle method to achieve this