-
青简半卷2020-01-01 00:00
- 34
- 0
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片说明demo</title>
<!--样式-->
<style type="text/css">
/*主div*/
#main
{
width: 960px;
height: 600px;
border: 1px solid #000;
margin: auto;
}
.content
{
margin:auto;
margin-top: 50px;
width: 99%;
}
.photo
{
float: left;
margin-left: 20px;
cursor: pointer;
}
/*图片*/
.pic
{
height: 287px;
width: 287px;
border: 1px solid #fc2;
}
/*文字描述*/
.des
{
display: none;
width: 289px;
height: 289px;
margin-top: -289px;
border: 1px solid #ce3;
background-color: #000;
color: #fff;
z-index:10px;
position: relative;
}
.detail
{
display: none;
width: 300px;
height: 200px;
background-color: #eec;
}
</style>
<!--JS代码-->
<script type="text/javascript">
function ShowDes( id ){
document.getElementById('des'+ id ).style.display = "block";
}
function ClearDes( id ){
document.getElementById('des'+ id ).style.display = "none";
}
function ShowDetail( id ){
document.getElementById( 'detail'+id ).style.display = "block";
document.getElementById('list_content').style.display = "none";
}
</script>
</head>
<body>
<div id="main">
<div id="list_content" class="content">
<div class="photo">
<img class="pic" id="img1" onmouseover="ShowDes(1)" onmouseout="ClearDes(1)" src="http://img0.bdstatic.com/img/image/sy1204.jpg" />
<span id="des1" onclick="ShowDetail(3)" class="des">
图片一
</span>
</div>
<div class="photo">
<img id="img2" class="pic" onmouseover="ShowDes(2)" onmouseout="ClearDes(2)" src="http://img0.bdstatic.com/img/image/8034a36acaf2edda3cc7a7cfd3703e93901213f9208.jpg" />
<span id="des2" class="des">
图片二
</span>
</div>
<div class="photo">
<img class="pic" id="img3" onmouseover="ShowDes(3)" onmouseout="ClearDes(3)" src="http://img0.bdstatic.com/img/image/379b8389b504fc2d5625c364ec2e51190ef76c66ce7.jpg" />
<span id="des3" class="des" >
图片三
</span>
</div>
</div>
<div id = "detail1" class = "detail" >
APP详情1
</div>
<div id = "detail2" class = "detail" >
APP详情2
</div>
<div id = "detail3" class = "detail" >
APP详情3
</div>
</div>
</body>
</html>
实现的效果是鼠标放到图片上，会显示图片的一个说明文字，但是发现鼠标放上去，会不停的闪烁，求知道原因
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
独自上岸自我救赎 普通会员 1楼
在JavaScript中，
onmouseover事件是指当鼠标悬停在元素上时触发的事件。当鼠标悬停在元素上时，元素的CSS样式会进行一些改变，例如改变背景色、添加边框等。这些改变可能会导致元素的CSS样式发生变化，从而改变元素的CSS样式值。当元素的CSS样式值发生变化时，浏览器会重新计算元素的位置和大小，这可能会导致元素的位置和大小发生变化，从而使得元素的层会出现闪烁的效果。
这种闪烁的效果可能是由于元素的CSS样式值发生变化导致的，也可能是因为浏览器在计算元素的位置和大小时出现了错误。你可以尝试调整元素的CSS样式值，或者检查浏览器的JavaScript代码，看看是否有错误。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部