html使用onmouseover事件怎么设置鼠标移动到图片或者文字上在旁边弹出一个图片介绍
.s1{
position: absolute;
display: none;
}
// js
function show(){
document.getElementById("s1").style.display="block";
}
function dis(){
document.getElementById("s1").style.display="none";
}
<img src="small.bmp" onmouseover="show();" onmouseout="dis();">
<div class="s1" id="s1"><img src="big.bmp"></div>
要是想弹出文字介绍 把s1里面的img换成字就行了,或者简单点就在第一个img上加一个alt的属性,鼠标放在上边也有显示。
有点不太明白,新手勿喷
.s1{
position: absolute;
display: none;
}
// js和下面那段
是放在css里面的吗?
.s1{
position: absolute;
display: none;
}
function show(){
document.getElementById("s1").style.display="block";
}
function dis(){
document.getElementById("s1").style.display="none";
}
js是放在script里面的。
这样:
<Ahref=""><imgsrc="../images/yumen.jpg"onmouseover="this.src='../images/yumen1.jpg'"onmouseout="this.src='../images/yumen.jpg'"width="100"height="28"></A>...
//设置一个div,但是默认却是隐藏起来的。
.s1{
position: absolute;
display: none;
}
// js
function show(){
document.getElementById("s1").style.display="block";
}
function dis
扩展资料:
注意事项
html部分:需要注意的是,用于显示图片的DIV需要放在body第一子节点,不然会出现定位错误<body>
<div id="box" class="col-md-4 col-md-offset-4"
<table class="table table-hover">
<thead>
<tr>
<th class="text-info" colspan="4">
天涯书城书目 </th>
</tr>
<tr>
<th>书名</th>
<th>作者</th>
<th>售价</th>
<th>书类</th>
</tr
</thead>
<tbody>
<tr onmouseout="hiddenPic()" onmousemove="showPic('img/0.png')">
<td>
新华字典 </td>
<td>
新华出版社 </td>
<td>
32.5 </td>
<td>
工具书 </td>
</tr>
</tbody>
</table>
</div>
<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div></body>