Starting with the script =
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".departDates li").hover(function () {
$(this).children(".showFlightPopup").toggle("slow");
});
});
</script>
CSS =
<style type="text/css">
.departDates{
border-top: 2px dotted #6c6c6c;
padding: 10px 0;
line-height: 18px;
overflow: hidden;
}
.departDates .showFlightPopup{
width: 150px;
border: 1px #d7d7d7 solid;
position: absolute;
background: #fff;
margin: 0 0 0 40px;
display: none;
}
</style>
And the markup
<ul class="departDates">
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
</ul>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".departDates li").hover(function () {
$(this).children(".showFlightPopup").toggle("slow");
});
});
</script>
CSS =
<style type="text/css">
.departDates{
border-top: 2px dotted #6c6c6c;
padding: 10px 0;
line-height: 18px;
overflow: hidden;
}
.departDates .showFlightPopup{
width: 150px;
border: 1px #d7d7d7 solid;
position: absolute;
background: #fff;
margin: 0 0 0 40px;
display: none;
}
</style>
And the markup
<ul class="departDates">
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
</ul>
No comments:
Post a Comment