Question

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

页面加载/实体：sql injection attacks 鼠标悬停：http://newlifectbeta.businesscatalyst.com/images/cal_solid.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>

Answer 1

从background: #fff;类

中删除.addeventatc

 .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;

图像图标在我悬停在它上面之前不会出现？ - CSS / JS问题 - 添加事件小组件

1 个答案: