gpt4 book ai didi

javascript - 图像图标直到我悬停在它上面才出现? - CSS/JS 问题 - 添加事件小部件

转载 作者:行者123 更新时间:2023-11-28 06:01:03 25 4
gpt4 key购买 nike

下面是我使用 AddEvent.com 小部件代码创建的代码。现在我想要显示以下两个图标,一个在页面加载时显示,一个在鼠标悬停事件期间显示。这是我的第一篇文章,所以如果我需要修改它以使其更具可读性,请告诉我。我没有发布 addevent.com 使用的专有 JS 文件,因为它太大了。

页面加载/实体:http://newlifectbeta.businesscatalyst.com/images/cal_solid.png鼠标悬停:http://www.runforhopect.com/images/cal_hover.png

<head>
<title>AddEvent</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="Author" content="AddEvent" />

<meta charset="utf-8" />


<style>
/* The button */
.addeventatc {display:inline-block;
position:relative;
z-index:999998;
font-family:Arial,sans-serif;
background: rgba(0, 0, 0, 0) url("http://newlifectbeta.businesscatalyst.com/images/cal_solid.png") no-repeat scroll 0 0;
background:#fff;
width:106px;
height:106px;
font-size:14px;
text-decoration:none;}
.addeventatc:hover {color:#555;
width:106px;
height:106px;
background:url("http://www.runforhopect.com/images/cal_hover.png") no-repeat scroll 0 0;
font-size:14px;
text-decoration:none;}
.addeventatc .icon {width:106px;
height:106px;
background: rgba(0, 0, 0, 0) url("http://newlifectbeta.businesscatalyst.com/images/cal_solid.png") no-repeat scroll 0 0;}
</style>

<!-- AddEvent -->
<script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js"></script>

<!-- AddEvent Settings -->
<script type="text/javascript">
addeventatc.settings({
license : "replace-with-your-licensekey",
css : false
});
</script>
</script>
</head>

<body>
<div title="Add to Calendar" class="addeventatc">
<span class="icon"></span>
<span class="start">06/18/2015 09:00 AM</span>
<span class="end">06/18/2015 11:00 AM</span>
<span class="timezone">Europe/Paris</span>
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
<span class="location">Location of the event</span>
<span class="organizer">Organizer</span>
<span class="organizer_email">Organizer e-mail</span>
<span class="all_day_event">false</span>
<span class="date_format">MM/DD/YYYY</span>
</div>
</body>

最佳答案

.addeventatc 类中删除 background: #fff;

 .addeventatc {
display: inline-block;
position: relative;
z-index: -999998;
font-family: Arial,sans-serif;
background: rgba(0, 0, 0, 0) url('http://newlifectbeta.businesscatalyst.com/images/cal_solid.png') no-repeat scroll 0 0;
width: 106px;
height: 106px;
font-size: 14px;
text-decoration: none;

关于javascript - 图像图标直到我悬停在它上面才出现? - CSS/JS 问题 - 添加事件小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36748090/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com