Clever Geek Handbook

How to show hidden content on hover in CSS

As the title says, I want to show the hidden "window" range when the image is dropped, but I can't get it to work, so I was hoping that you guys could figure out my error.

Html

<span class="DDAA__bg">
<h1 class="DDAA__headline"><a href="#">DANSK DYREVÆRN ÅRHUS</a></h1>
</span>
<span class="DDAA__pic">
<img src="img/DDAA-Logo.png" width="980" height="200"  alt="Dansk Dyreværn Århus"/>
</span>

CSS

span.DDAA__bg{
  height: 200px;
  width: 980px;
  background-color: #666;
  position: absolute;
  display: none;
}

span.DDAA__pic{
   display:block;
   visibility: visible;
}

span.DDAA__pic:hover{
   visibility: hidden;
   transition-delay: 2s;
}

span.DDAA__pic:hover + span.DDAA__bg{
   display:block;
}

You can see how it works here, not so well: /

http://jsfiddle.net/ary3bt83/3/

0


source to share


2 answers 


element:hover > other_element {
 display: block;
}

this is equal to jQuery code



 $(element).on('hover', function() { $(this).css("display", "block"); });

But doing hang on css is sometimes really buggy ...

0


source


First you need to install jQuery (search for jquery.js / jquery.min.js in source code or google to install w3c jquery)

After that, you write the following:



<script>
$(document).ready(function() {
// everything here is done once the page is loaded

// define hover event handler for a specific element
$(".the_hovered_element").on('hover', function() {
   // show the element 
   $(".the_element_to_be_shown").css("display","block");
});
});
</script>

Don't forget that you must first set display: none on the div which is first hidden and then shown. Also instead of .css ("display", "block") you can have simple animations like .fadeIn ("slow");

0


source






More articles:


All Articles