On hover event calendar using css | Sanwebcorner

On hover event calendar using css

This is one of the simple way to display the list of events using calendar icon. This also use to display the event description on hover the calendar icon.

It is very useful to display the list of holidays and events in calendar type instead of displaying in the text format. and also description in the format of hover the particular calendar.





Html Code:

<div class="row">
<div class="balloon">
<div class="monthName">LIST OF HOLIDAYS IN JULY</div>
<ul>
<li>
<a href="#">6
</a>
<table><tr><td>
<dl id="web4" class="rtAlign">
<dd><p>Hari Raya Puasa
- Holiday (W)sdf sdf sdfsfsdf sdfsdf sdfsdf sdf sdf sdf sdfsd fsdfsdf sdsd f  fsdfd</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">18</a>

<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>CBSE 11 and 12
return, IB 2 return</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">19</a>
<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>UNSW English
Exam (P, S, SR, IB1,
IB2)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">25
</a>
<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>School resumes (EY, P)<br />
School Resumes Senate
Election Process starts (S)<br />
XII CBSE - SA 1 Starts (SR)<br />
New IB Year 1 Start<br />
CC - Gr 12 Submission of
First draft of College list
</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">26
</a>

<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>OBT Gr 2 to 5 begins (P) </p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">
28
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>Senate Election (S)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">
29
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>OBT Gr 2 to 5 (P)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">29
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>UT1-Portfolio sent home<br />
Investiture and Valediction
Ceremony (S)<br />
Orientation - Grade-IBDP
Year 1 - 5 pm<br />
Sec.Auditorium (IB1)<br />
English L&L- HL- 1st draft of
2nd WT (IB2)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">30
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>OBT Gr 2 to 5 (P) ends</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
</ul>
<div class="clear"></div>
</div>
</div>

Css Code:


.balloon {
    margin: 0 auto;
    padding-bottom: 35px;
background-color: #fff;
background-image: none;
width: 100%;
}
.balloon ul {
    border: 0 none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.balloon ul li, .balloon ul li.last {
    float: left;
    height: 40px;
    margin: 0 8px 10px 0;
    text-align: center;
    width: 40px;
}

.balloon ul li a, .balloon ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:59px;
height:49px;
color:#000;
background:#fff;
background-image: url(../images/date_bg_rev.png);
background-position: top left;
background-repeat: no-repeat;
padding-top: 16px;
}
.balloon ul li a img, .balloon ul li a:visited img {
border:0;
}

.balloon ul li dl {
visibility:hidden;
position:absolute;
}

table {
margin:-2px;
border:0;
padding:0;
border-collapse:collapse;
font-size:1em;
}

.balloon dl {width:155px; padding:0 0 20px 0; background:transparent url

(bottom.gif) no-repeat bottom left; height:auto;}
.balloon dt {margin:0; padding:5px; font-size:1.4em; font-weight:bold;

color: #000; background:transparent url(top.gif) no-repeat top

left; text-align:center;}
.balloon dd {margin:0; padding:5px; color:#fff; font-size:14px; font-weight: bold; text-align: left; line-height: 18px;

border:1px solid #eee; border-width:1px; background:#369; background: #000; color:#fff;
}
.balloon dd p {padding:0; margin:5px 0; line-height:auto;}
.balloon dl#web2 {background:transparent url(bottom2.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web3 {background:transparent url(bottom3.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web4 {background:transparent url(bottom4.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web5 {background:transparent url(bottom5.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web6 {background:transparent url(bottom6.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web2 dt {background:transparent url(top2.gif) no-

repeat top left;}
.balloon dl#web3 dt {background:transparent url(top3.gif) no-

repeat top left;}
.balloon dl#web4 dt {background:transparent url(top4.gif) no-

repeat top left;}
.balloon dl#web5 dt {background:transparent url(top5.gif) no-

repeat top left;}
.balloon dl#web6 dt {background:transparent url(top6.gif) no-

repeat top left;}

/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */

/* for new design */

.balloon ul li.last {
margin-right: 0;
}
.balloon ul li a, .balloon ul li a:visited {
background-image:url(cal_sq_bg.png);
background-position: left top;
background-repeat: no-repeat;
    color: #000;
    display: block;
    height: 40px;
    padding-top: 0px;
    text-decoration: none;
    width: 40px;
font-family: Fjalla One, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #000;
font-weight:normal;
line-height:47px;

}
.balloon ul li:hover, .balloon ul li a:hover {
background-image:url(cal_sq_bg.png);
    background-position: left -45px;
    background-repeat: no-repeat;
    color: green;
    cursor: pointer;
    position: relative;
}
.balloon ul li:hover dl,
.balloon ul li a:hover dl {
visibility:visible;
color:#000;
top: 20px;
left:-155px;
cursor:default;
}
#leftNavArea .balloon ul li:hover dl,
#leftNavArea .balloon ul li a:hover dl {
visibility:visible;
color:#000;
top: 20px;
left:-105px;
cursor:default;
}
.balloon ul li:hover dl.rtAlign,
.balloon ul li a:hover dl.rtAlign {
visibility:visible;
color:#000;
top:-25px;
left:70px;
top: 20px;
left:40px;
cursor:default;
}
#leftNavArea .balloon ul li:hover dl.rtAlign,
#leftNavArea .balloon ul li a:hover dl.rtAlign {
visibility:visible;
color:#000;
top:-25px;
left:70px;
top: 20px;
left:40px;
cursor:default;
}
.balloon ul li a.small {
height: 36px;
    font-size: 14px;
    line-height: 14px;
    padding-top: 6px;
}
.monthName {
clear:both;
font-family: Fjalla One, Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 3px 0 3px;
border-bottom: 1px dotted #484848;
margin-bottom: 5px;
letter-spacing: 1px;
}

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll create random number Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html dropdown html form html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover lock & unlock page scroll marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form Multi-Step-form mysql News ticker on hover change text to image our team page password generator password strength checker Photoshop PHP populate html selectbox Popup image on click the link pure css Question type form random number generate Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image selectbox based on select box simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube