效果图一:
HTML:
<div class="dont_workbench_power_response_parent">
<div class="list-item-response dont_workbench_power_response_icon">
<input class="participate-in-demand this_user_response_old" style="width: 200px; height:36px;" type="button" value="无权限参与"/>
</div>
<div class="dont_workbench_power_response">
<span>提示文字</span>
<div class="triangle-border tb-border"></div>
<div class="triangle-border tb-background"></div>
</div>
</div>
CSS:
.dont_workbench_power_response_parent{position: relative;}.dont_workbench_power_response{position: relative;width: 210px;height: 55px;background: #232323;box-shadow: 1px 1px 1px #232323;border: 1px solid #232323;text-align: center;color: #fff;left: -7px;top: -120px;border-radius: 4px;filter: alpha(opacity=80);-moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;display: none;line-height: 27px;}.dont_workbench_power_response span{margin: 0;}.triangle-border {position: absolute;left: 95px;overflow: hidden;width: 0;height: 0;border-width: 10px;border-style: solid dashed dashed dashed;}.tb-border {bottom:-20px;border-color:#232323 transparent transparent transparent;}.tb-background {bottom:-19px;border-color:#232323 transparent transparent transparent;}
jQuery('.dont_workbench_power_response_icon').mouseover(function(){
jQuery('.dont_workbench_power_response').show();
}).mouseout(function(){
jQuery('.dont_workbench_power_response').hide();
});
扩展:
设置通用的透明度:{
filter:alpha(opacity=50);
-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;
}
效果图二:
css:
div.operation-authority-content-div{
height: 48px;
text-align: center;
color: #b4b5b5;
position: relative;
line-height: 48px;
}
.cancel_response_requirement_tip{
position: absolute;
width: 300px;
bottom: 43px;
border: 1px solid #ccc;
left: -112px;
z-index: 10;
display: none;
background: #fff;
border-radius: 3px;
padding: 10px;
text-align: left;
}
.cancel_response_requirement_tip > s{
position: absolute;
bottom: -20px;
left: 150px;
display: block;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-color: #cccccc transparent transparent transparent;
border-style: solid dashed dashed dashed;
border-width: 10px;
}
.cancel_response_requirement_tip > s > i{
position: absolute;
top: -11px;
left: -10px;
display: block;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-color: #ffffff transparent transparent transparent;
border-style: solid dashed dashed dashed;
border-width: 10px;
}
.cancel_response_requirement_tip > p{
margin: 0;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
color: rgb(51, 51, 51);
line-height: 20px;
}
.cancel_response_requirement_tip > p > span{
font-weight: bold;
}
HTML:
<div class="operation-authority-content-div">
<img class="cancel-response-requirement-not-function" src="../images/cancel_response_requirement_grey.png"/>
<div class="cancel_response_requirement_tip" style="display: none;">
<p><span>剔出参与者状态:</span>审核中</p><p><span>剔出参与者时间:</span>2015-06-30 09:39:36</p><p><span>剔出参与者原因:</span> jQuery('#requirement_response_upload_title').text('踢出参与者');</p>
<s>
<i></i>
</s>
</div>
</div>
JS:
jQuery('div.operation-authority-content-div img.cancel-response-requirement-not-function').live('mouseover',function(){
jQuery(this).siblings('div.cancel_response_requirement_tip').show();
}).live('mouseleave',function(){
jQuery(this).siblings('div.cancel_response_requirement_tip').hide();
});