关于onmouseover事件的JS
效果是鼠标留在图片上时，有如上效果这个js怎么写，怎么用，非交互仅仅是在本地实现就OK了求大神解救...
效果是鼠标留在图片上时，有如上效果
这个js怎么写，怎么用，非交互仅仅是在本地实现就OK了
求大神解救 展开
这个js怎么写，怎么用，非交互仅仅是在本地实现就OK了
求大神解救 展开
展开全部
你好,你看下是不是这样,让它的显示的方式也可以用改变它的 top 、left 值,我这里只是改变它的 display.(下面的只要把图片的文件名改成你测试的图片就可以了)
希望能帮到你,谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml11-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>显示信息</title>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
#mainImg{
position:relative;
margin:0px auto;
}
#imgInfo{
position:absolute;
width:100%;
height:30px;
z-index:9;
color:#fff;
display:none;
}
#infoBg{
display:inline-block;
width:100%;
height:100%;
z-index:-1;
position:absolute;
background-color:#000;
}
#mainImg,#imgList,#imgList img{
width:170px;
height:170px;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function (){
// 获取元素
var oMainImg=document.getElementById("mainImg"); // 获取最外层的 DIV
var oImgInfo=document.getElementById("imgInfo"); // 获取显示信息的DIV
var oInfoBg=document.getElementById("infoBg"); // 获取背景
// 把设置信息背景的透明度
if(document.all){ // IE
oInfoBg.style.filter="alpha(opacity:60)";
}else{
oInfoBg.style.opacity=0.6;
}
// 添加事件
oMainImg.onmouseover=function (){
oImgInfo.style.display="block";
}
oMainImg.onmouseout=function (){
oImgInfo.style.display="none";
}
}
//-->
</script>
</head>
<body>
<div id="mainImg">
<!-- 这里是显示图片信息 -->
<div id="imgInfo">
<span id="infoBg"></span> <!-- 这个是信息的背景,因为要用到透明效果,所有把背景单独出来 -->
这里写要显示的信息
</div>
<!-- 这里显示图片 -->
<div id="imgList">
<img src="img/02.jpg" title="02" alt="02.jpg" />
</div>
</div>
</body>
<html>
希望能帮到你,谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml11-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>显示信息</title>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
#mainImg{
position:relative;
margin:0px auto;
}
#imgInfo{
position:absolute;
width:100%;
height:30px;
z-index:9;
color:#fff;
display:none;
}
#infoBg{
display:inline-block;
width:100%;
height:100%;
z-index:-1;
position:absolute;
background-color:#000;
}
#mainImg,#imgList,#imgList img{
width:170px;
height:170px;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function (){
// 获取元素
var oMainImg=document.getElementById("mainImg"); // 获取最外层的 DIV
var oImgInfo=document.getElementById("imgInfo"); // 获取显示信息的DIV
var oInfoBg=document.getElementById("infoBg"); // 获取背景
// 把设置信息背景的透明度
if(document.all){ // IE
oInfoBg.style.filter="alpha(opacity:60)";
}else{
oInfoBg.style.opacity=0.6;
}
// 添加事件
oMainImg.onmouseover=function (){
oImgInfo.style.display="block";
}
oMainImg.onmouseout=function (){
oImgInfo.style.display="none";
}
}
//-->
</script>
</head>
<body>
<div id="mainImg">
<!-- 这里是显示图片信息 -->
<div id="imgInfo">
<span id="infoBg"></span> <!-- 这个是信息的背景,因为要用到透明效果,所有把背景单独出来 -->
这里写要显示的信息
</div>
<!-- 这里显示图片 -->
<div id="imgList">
<img src="img/02.jpg" title="02" alt="02.jpg" />
</div>
</div>
</body>
<html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
Storm代理
2023-07-25 广告
StormProxies是一家可靠的代理服务提供商，提供原生IP（住宅原生IP）和高匿名代理服务。以下是关于StormProxies的原生IP服务的一些信息：1. 住宅原生IP：StormProxies提供的住宅原生IP是指从真实的家庭或企...
点击进入详情页
本回答由Storm代理提供
展开全部
正常情况你把最上边的黑色部分 隐藏（style="display:none"）
鼠标放上面的时候给图片一个事件：
$(document).ready(function () {
$("#图片id").hover(function () {
$("#上面黑色部分id").css("display","block");
},
function () {
$("#上面黑色部分id").css("display", "none");
})
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果没有什么动画效果的话css就可以了。
用hover伪类实现
a:hover{
display: block;
}
用hover伪类实现
a:hover{
display: block;
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
