这里列举一个单选按钮显示提示信息的情况,其他情况可以类比:
html 部分
<td>
<a class="tiptool" title="今天天气不错。<br/>可是,我感觉会下雨" >
<input type="radio" value=1 onclick="get()">
</a>
</td>
css部分
<style>
#tiptool{
position:absolute;
padding-left: 10px;
padding-right: 10px;
background:#3499da;/*设置背景色*/
color:#fff;
display:none;
height: auto;/*设置这个是为了文字可以换行*/
line-height: 30px;
border-radius:5px;
font-size:16px;/*设置这个是为了文字大小*/
}
td>a{
text-decoration:none;
color:#333333;
}
td>a:hover{
text-decoration:none;
color:#333333;
}
</style>
js部分
<script>
var x = 20;
var y = 15;
var newtitle = '';
$('a.tiptool').mouseover(function(e) {
newtitle = this.title;
this.title = '';
$('body').append('<div id="tiptool">' + newtitle + '</div>');
$('#tiptool').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y + 'px')
}).show();
}).mouseout(function() {
this.title = newtitle;
$('#tiptool').remove();
}).mousemove(function(e) {
$('#tiptool').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y + 'px')
}).show();
})
</script>
其他1
背景图如何填充整个div?
style="background:url('img/bg.png')no-repeat;background-size:100% 100%; "
除此之外,可以了解一下,下面几种填充方式的用法:
background-size:contain;
background-size:cover;
background-size:include;
参考文章:
https://blog.csdn.net/wd4java/article/details/50537562
未完待续 >>