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
Related
I got two div's and I want to change the color of the first by hovering the second one. I found solutions when the "hovered " come before the objective that its css should be changed, what if the "hovered" come after? What could be done without javascript?
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box"></div>
<div class="box-2"></div>
</div>
</body>
A solution is to inverse the order visually and keep the order in the DOM so that you can still use the + selector.
Here is an example with flex:
.wrapper {
display:flex;
flex-direction:column;
}
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
order:2; /* this will make box-2 goes after */
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box-2"></div>
<div class="box"></div>
</div>
</body>
Some related question to get more ideas:
Is there a "previous sibling" CSS selector?
Previous adjacent sibling selector workaround?
While Temani's answer is a great technique, I have an alternative suggestion if you need this to work both ways, using the :not() selector, though it's a tad bit more hit-or-miss because of your margins.
If you check for the hover on the .wrapper element, you can then style your box when it isn't hovered, like so:
.wrapper:hover > .box:not(:hover) {
background-color: green;
}
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;
}
I'm trying to use the :not selector to get rid of margins from an element that isn't followed by a certain element (.red).
HTML
<section class="image"></section>
<div class="red"></div>
<section class="image"></section>
<section class="image"></section>
<section class="image"></section>
CSS
.image {
background: green;
height: 100px;
width: 100px;
margin-bottom: 30px;
}
.image + div:not(.red) {
margin-bottom: 0;
}
For some reason though, the bottom margins aren't being removed. I've setup a CodePen of it in action over here.
Any help is appreciated. Thanks in advance!
Try using the sibling selector. Here is a JSFiddle
CSS:
div.red ~ .image {
margin-bottom: 0;
}
This will target any .image that is preceded by a div.red. However, a .image that is before a div.red will not be selected.
.image {
background: green;
height: 100px;
width: 100px;
margin-bottom: 30px;
}
.red .image { //this will select the section which are children of red class and have image class
margin-bottom: 0;
}
The goal
Change an element by hovering another with CSS.
The problem
I don't know the syntax. Any ideas?
Code spotlight
I want to change .frame by hovering .app > a. The CSS syntax is spotlighted below:
.app a:hover ->¹ .frame {
background-color: yellow;
}
.frame {
background-color: blue;
width: 300px;
height: 300px;
}
¹ just illustration.
(Also available in jsFiddle)
Try this on for size:
.app:hover ~ .frame {
background-color: yellow;
}
.frame {
background-color: blue;
width: 300px;
height: 300px;
}
Demo: http://jsfiddle.net/maniator/jWA3s/1/
Reference: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
I would like to display text when the user mouseovers the image.
How can I do this in HTML/JS?
You can use title attribute.
<img src="smiley.gif" title="Smiley face"/>
You can change the source of image as you want.
And as #Gray commented:
You can also use the title on other things like <a ... anchors, <p>, <div>, <input>, etc.
See: this
You can use CSS hover:
div {
display: none;
border: 1px solid #000;
height: 30px;
width: 290px;
margin-left: 10px;
}
a:hover+div {
display: block;
}
<a><img src='https://placekitten.com/100/100'></a>
<div>text</div>
You can do like this also:
HTML:
<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>
In javascript:
function somefunction()
{
//Do somethisg.
}
You can use CSS hover in combination with an image background.
.image {
background: url(https://placekitten.com/100/100);
height: 100px;
width: 100px;
display: block;
float: left;
}
.image a {
display: none;
}
.image a:hover {
display: block;
}
<div class="image">Text you want on mouseover</div>