Hovering Over Image And Reveal Div Element

Is there any possible ways when I hover over one element and revealing my other element with pure css? I know how to make simple hover effects such as .class{ //some styles } .cla

Solution 1:

Here's a fiddle

If you have elements nested within each other, you can use the following:

<divid='parent'><divid='child'></div></div>#parent {width:200px;height:200px;background:blue;}#child {display:none;width:100px;height:100px;background:red;}#parent:hover #child {display:block;}

Solution 2:

There are three ways of doing this. The elements have to be

1. adjacent
2. nested within (descendant)
3. nested within (Child)

So you could do as

HTML

<divclass="test test1">hover over me</div><divclass="test test1-h"></div><br><br><divclass="test test2">
    hover over me
    <divclass="test test2-h"></div></div><br><br><divclass="test test3">
     hover over me
     <div><divclass="test test3-h"></div></div></div>

CSS

.test {
    padding: 30px;
    background: red;
    display: inline-block;
}

.test.test {
    background: blue;
}
/******************Adjacent***************/.test1:hover+div.test1-h {
    display: none;
}
/*****************nested within (descendant)***/.test2:hover > .test2-h {
    background: green;
}
/*****************nested within (Child)***/.test3:hover.test3-h {
    background: tomato;
}

here is a DEMO

Solution 3:

I also found onother solution for my code may be help fore someone else. I achieved it with opacity and visibilityFiddle