Page Widget How to - Hover to toggle text in div

Question

We would like to know how to hover to toggle text in div.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.wrap {<!--from w ww .  j  a  v  a2s .  com-->
  outline: 1px dotted blue;
  height: 300px;
}

.noshow, .wrap:hover .show {
  display: none
}

.wrap:hover .noshow {
  display: block
}
</style>
</head>
<body>
  <div class="wrap">
    <div class="show">
      <p>if {&nbsp;</p>
      <p>yourSite < awesome;&nbsp;</p>
      <p>solution = aislingDouglas (HTML5 + CSS3 +&nbsp;</p>
      <p>JavaScript + PHP);&nbsp;</p>
      <p>}&nbsp;</p>
      <p>else {&nbsp;</p>
      <p>solution = null;&nbsp;</p>
      <p>}&nbsp;</p>
    </div>
    <div class="noshow">
      <p>Need a website? &nbsp;</p>
      <p>You found your dream developer!&nbsp;</p>
      <p>And hey - I already helped you on the web,&nbsp;</p>
      <p>why not let me help you&nbsp;</p>
      <p>build an amazing site!&nbsp;</p>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: