我下面的 jQuery 代码不是很可重用。正如您在准备好的文档中看到的那样,我没有直接从父级获取 rel 属性值(不知道如何)。相反,我必须具体说明我从哪个父母的 rel 中获取价值。任何帮助表示赞赏。
这是我刚刚设置的 jsfiddle 的链接:http: //jsfiddle.net/RXb5K/
function keyToolTip() {
$('.educoreres_key').mouseover(function () {
$(this).find('.keytooltip').stop(true, true).fadeIn(300);
});
$('.educoreres_key').mouseout(function() {
$(this).find('.keytooltip').fadeOut(500);
});
return false;
};
$(document).ready(function () {
$('.educoreres_key').append('<div class="keyimg"></div><div class="keytooltip"><div class="keytooltiparrow"></div><div class="keytooltipinside"></div><div class="clear"></div></div>');
$('.webresource .keytooltipinside').append($('.educoreres_key.webresource').attr('rel'));
$('.pdfdocument .keytooltipinside').append($('.educoreres_key.pdfdocument').attr('rel'));
$('.worddocument .keytooltipinside').append($('.educoreres_key.worddocument').attr('rel'));
$('.videoresource .keytooltipinside').append($('.educoreres_key.videoresource').attr('rel'));
$('.webinarresource .keytooltipinside').append($('.educoreres_key.webinarresource').attr('rel'));
$('.powerpointresource .keytooltipinside').append($('.educoreres_key.powerpointresource').attr('rel'));
keyToolTip();
});
HTML:
<div class="eduresourceskeys">
<div class="educoreres_key_label">Resources Key:</div>
<div class="educoreres_key webresource" rel="Web Resource"></div>
<div class="educoreres_key pdfdocument" rel="PDF Document"></div>
<div class="educoreres_key worddocument" rel="Word Document"></div>
<div class="educoreres_key videoresource" rel="Video Resource"></div>
<div class="educoreres_key webinarresource" rel="Webinar Resource"></div>
<div class="educoreres_key powerpointresource" rel="PowerPoint Resource"></div>
<div class="clear"></div>
</div>
CSS:
div.eduresourceskeys {
margin: 15px 0 0 45px;
}
div.educoreres_key_label {
margin: 0 10px 0 0;
float: left;
color: #414141;
font-family: 'HelveticaLTStdRegular', Helvetica, Arial, Sans-serif;
font-size: 13px;
line-height: 32px;
}
div.educoreres_key {
position: relative;
margin: 0 8px 0 0;
float: left;
width: 43px;
height: 34px;
cursor: pointer;
}
div.educoreres_key.webresource {}
div.educoreres_key.pdfdocument {}
div.educoreres_key.worddocument {}
div.educoreres_key.videoresource {}
div.educoreres_key.webinarresource {}
div.educoreres_key.powerpointresource {}
div.educoreres_key div.keyimg {
width: 43px;
height: 34px;
}
div.educoreres_key.webresource div.keyimg { background: url("../img/icon_media_html_page.png") 0 0 no-repeat; }
div.educoreres_key.pdfdocument div.keyimg { background: url("../img/icon_media_pdf.png") 0 0 no-repeat; }
div.educoreres_key.worddocument div.keyimg { background: url("../img/icon_media_word_doc.png") 0 0 no-repeat; }
div.educoreres_key.videoresource div.keyimg { background: url("../img/icon_media_video.png") 0 0 no-repeat; }
div.educoreres_key.webinarresource div.keyimg { background: url("../img/icon_media_html_page.png") 0 0 no-repeat; }
div.educoreres_key.powerpointresource div.keyimg { background: url("../img/icon_media_powerpoint.png") 0 0 no-repeat; }
div.keytooltip {
position: absolute;
top: 40px;
left: 50%;
z-index: 20;
margin: 0 0 0 -72px;
display: none;
width: 140px;
border: 2px solid #1e5a7a;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.20);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.20);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.20);
}
div.keytooltipinside {
position: relative;
padding: 10px;
color: #131313;
font-size: 11px;
line-height: 14px;
text-align: center;
}
div.keytooltiparrow {
position: absolute;
top: -10px;
left: 50%;
margin: 0 0 0 -10px;
width: 20px;
height: 10px;
background: url("../img/tooltip_arrow.png") 0 0 no-repeat;
}