2

Now I can do that with CSS, but it works only when the hidden div is a child of a parent. You hover on parent div and set CSS on hover to display the child from none to block, something like that.

But how do you do that if the hidden block is outside the div that you hover and the hidden one appears?

Example:

<div class="field-1"></div>
<div class="field-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.</div>

JSFiddle http://jsfiddle.net/23u3rmx5/ when you hover over red block the .field-2 must appear below it. You cannot move the div structure, e.g. move .field-2 inside .field-1, I can do that, but that's not the solution.

Thanks for helping and cheers! Have a good weekend!

Optimus Prime
  • 499
  • 3
  • 8
  • 18
  • there is no jquery / javascript code inside fiddle..what you have tried so far..??? – Kartikeya Khosla Sep 27 '14 at 08:22
  • I accept any solutions with jQuery too if needed. Thanks. – Optimus Prime Sep 27 '14 at 08:23
  • 1
    okk that is fine but first you have to show what you have tried so far and we will correct your code...we will not write code for you.. – Kartikeya Khosla Sep 27 '14 at 08:24
  • That's the problem, I only am experienced with CSS solutions. Not much of JS skills. – Optimus Prime Sep 27 '14 at 08:25
  • okk that is good i thought you are expecting some js code...+1 good question.. – Kartikeya Khosla Sep 27 '14 at 08:28
  • @TJ I just found [couple](http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css) [of](http://stackoverflow.com/questions/5766141/css-show-div-when-another-div-is-hover) [duplicates](http://stackoverflow.com/questions/14382149/show-div-when-hover-another-div-using-only-css) out there. Not sure if I should close them all. What do you think? – Hashem Qolami Sep 27 '14 at 09:03
  • @HashemQolami close them all, i marked it with the one which was easiest for me to find.. – T J Sep 27 '14 at 09:07

4 Answers4

5

In this particular instance you can use adjacent sibling combinator + to target the element having .field-2 class as follows:

Example Here

.field-1:hover + .field-2 { display: block; }

Also if the .field-2 don't immediately follow the .field-1, you could try using general sibling combinator ~ instead:

Example Here

.field-1:hover ~ .field-2 { display: block; }
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Hey that's awesome. But that plus sign, how many browsers supports it? Is this major feature in all browsers or something fancy? Thanks again. – Optimus Prime Sep 27 '14 at 08:27
  • @OptimusPrime It's supported even in Internet Explorer 7. – Hashem Qolami Sep 27 '14 at 08:30
  • 1
    It's worth noting that adjacent sibling combinator is a part of [CSS selectors level 2](http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors) while general sibling combinator belongs to [CSS selectors level 3](http://www.w3.org/TR/css3-selectors/#general-sibling-combinators). But both are supported in very wide range of web browsers including IE7. – Hashem Qolami Sep 27 '14 at 08:41
1

http://jsfiddle.net/23u3rmx5/1/

$(".field-1").on("mouseover", function() {
    $(".field-2").show();
}).on("mouseout", function() {
    $(".field-2").hide();
});

Though use Hashem's solution if your sure you wont be changing the DOM structure in the future

mn.
  • 796
  • 6
  • 12
0
.field-1 {
    width: 150px;
    height: 150px;
    display: block;
    background-color: red;
}
.field-1:hover + .field-2{
   display: block;  
}
.field-2 {
    background-color: #ccc;
    display: none;
}
Adeel Khanzada
  • 73
  • 12
0

Here is a solution using jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<script>
$('.field-1').mouseenter(function(){
    $('.field-2').show();
  });
$('.field-1').mouseleave(function(){
$('.field-2').hide();
  });
</script>

JSFIDDLE DEMO

Amit Singh
  • 2,267
  • 4
  • 25
  • 50