通过DIV+CSS实现一块没有连接的区域实现鼠标事件的动态效果

最新推荐文章于 2022-06-29 17:05:07 发布

原创最新推荐文章于 2022-06-29 17:05:07 发布 · 641 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用DIV和CSS实现元素响应鼠标事件的方法，包括鼠标悬停、按下及双击等效果，并提供了完整的样式定义及HTML引用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>

/*=DIV+CSS实现区域响应鼠标事件=*/
body
{
font:Arial,宋体;
font-size:12px;
padding:30px;
text-align:center;
}

/*外表格*/
#DivTable
{
width:80%;
height:480px;
text-align:left;
cursor:pointer;
}

/*普通样式*/
.Content
{
color:#C6005C;
border:1px solid #FFB6DA;
border-left:8px solid #FFB6DA;
background:#FFEAF5; 
padding:10px;
}

/*鼠标到上面时效果*/
.ContentHover
{
border:1px solid #E50072;
border-left:8px solid #E50072;
background:#FF2491; 
padding:10px;
color:#FFFFFF;
}

/*鼠标按下时*/
.ContentDown
{
border:1px solid #C6005C;
border-left:8px solid #C6005C;
background:#DD0056; 
padding:10px; 
color:#FFFFFF;
}

.ContentInfo
{
background:#FFFFFF;
text-align:right;
margin:0px;
}

a:link,a:visited
{
text-decoration:none;
display:block;
padding:5px;
border-bottom:1px dashed #C6005C;
color:#CC0000;
}

a:hover
{
color:#FFFFFF;
background:#FF2467;
padding:5px;
border-bottom:1px dashed #C6005C;

}

.ContentCode
{
background:#FFFFFF;
border:1px dashed #333333;
color:#333333;
padding:5px;
margin:0px;
height:100px;
overflow:scroll ; 
}

</style>

下面html 引用

<div class="ContentCode">
    <div class="Content" onmouseover="this.className='ContentHover'" 
    	onmouseout="this.className='Content'" 
    	onmousedown="this.className='ContentDown'" 
    	onmouseup="this.className='ContentHover'" 
    	ondblclick="location='http://www.iteye.com/'"> 文字内容 </div>
   </div>