fade in a div at mouse over at another div
Hi, I want to show a div when mouse over on a link, I used below code but all div's become appear and fade out together, I want to when mouse over on a specific link it's own div be shown, not all div's with that class.
the code is here:
- <script type="text/javascript">
- $(function () {
- $('.pdf').mouseover(function () {
- $('.view').fadeIn("slow");
- });
- $('.pdf').mouseout(function () {
- $('.view').fadeOut("slow");
- });
- })
- </script>
- <style type="text/css">
- .view
- {
- width:130px; height:30px; border:1px solid #959594; position:relative; z-index:200;
- background-color:#c4c4c4; color:#8a8a89; display:none;
- }
-
- .pdf
- {
- position:relative; width:220px; height:40px;
- }
- img
- {
- padding:30px;
- }
- .style1
- {
- width: 19px;
- }
- </style>
html code:
- <div class="pdf" style="">
- <img src="../../img/PDF_icon_web.jpg" alt="" width="32px" height="31px" />
- </div>
- <div class="view" >
- <a href="">View</a>|<a href="">Download</a>
-
- </div>
-
- </td>
- </tr>
- <tr>
- <td>
-
- <a href="">CHT815</a></td>
- <td class="style1">
-
-
- <br />
-
- <div class="pdf" style=" ">
-
- <img src="../../img/PDF_icon_web.jpg" alt="" width="32px" height="31px" />
- </div>
- <div class="view" >
- <a href="">View</a>|<a href="">Download</a>
- </div>
-
-
- </td>
-
- </table>