javascript - 为附加到图像的链接拉出不同的样式，导致不需要的图层

Question

我需要更新一个高度定制的 WP 网站，在页脚中其他认证印章旁边的特定位置添加 SecureTrust 徽标和网站链接。

我试图将 JavaScript 插入到 footer.php 中，但它不起作用/未被识别。作为一种解决方法，我编辑了样式 css 以显示 SecureTrust 徽标，然后在 html 中添加了一个锚以放置链接。

<div class="logo-box"> 
   <span class="example1"></span>
   <span class="iata"></span>
   <span class="securetrust">
      <a href="https://certs.securetrust.com/" target="_blank" rel="noopener" title="SecureTrust"><img src="https://companyname/wp-content/uploads/2020/08/tc-seal-blue46.png"></a></span>
</div>

.securetrust{
    text-indent: -999999px;
    background: url(images/tc-seal-blue46.png) no-repeat scroll left top rgba(0, 0, 0, 0);
    background-size: contain;
    display: inline-block;
    height: 46px;
    width: 100%;
    margin-left: 8px;
    max-width: 93px;
}

SecureTrust 徽标现在就位，但是“链接”连接到媒体样式并拉起站点徽标，而不是 css 中的 .securetrust 样式。如果有帮助，请附上图片。

有没有办法让链接拉出css图像？我也尝试过单独上传图片并指示 a href 来拉取它，但它不起作用。

标签： javascripthtmlcsswordpress

Answer 1

父 div 上的logo类导致了问题，因此要么摆脱它，要么由于某种原因需要保留它，请尝试以下操作。

您需要一个将覆盖站点徽标类的类。所以使用.logo .securetrust你的css选择器而不是仅仅.securetrust把它securetrust放在链接上而不是跨度上。

HTML

<div class="logo col-md-6 col-sm-12"> <!-- <- logo is problem class -->
  <div class="logo-box">
    <span>
      <a href="sealserver.trustwave.com/…&quot; class="securetrust" target="_blank" rel="noopener" title="SecureTrust">
        <img src="worldgo.ca/wp-content/uploads/2020/08/…&gt;
      </a>
    </span>

CSS

// to hide the site logo
.logo .securetrust {
  background: none;
}
// set the size and alignment of the image as required
.logo .securetrust img {
  width: 70px;
  vertical-align: top;
}