社交图标在移动设备和某些平板电脑中不起作用（链接不起作用，它们不会在悬停时更改图像）

Question

我创建了一些社交媒体图标并使用以下 html 和 css 进行设置。它们应该在悬停时更改为不同的图像，并且还应该链接到各种社交媒体链接。但是，在某些平板电脑和移动设备上，它不会在悬停时更改图像，并且当您单击它时不会去任何地方。这是它的 HTML 和 CSS。在页面的顶部和底部都有一个。我遇到了页脚区域底部的问题。

HTML：

<div class="social-media-holder socialtop">
            <div title="Visit our Facebook page" class="social-facebook" onclick="window.open('http://www.facebook.com/ilovetennistoronto')"></div>
            <div title="Visit our Twitter page" class="social-twitter" onclick="window.open('http://www.twitter.com/ilovetennisTO')"></div>
            <div title="Visit our Google+ page" class="social-google" onclick="window.open('https://plus.google.com/u/1/b/117545117809252336887/117545117809252336887')"></div>
        </div>  

CSS：

.social-media-holder {
  float: right;
  margin: -18px -40px 0 0;
}
.socialtop {
  top: -7px;
}
.social-facebook,
.social-google,
.social-twitter {
  background-image: url('http://www.ilovetennis.ca/wp-content/themes/I-L-T-Theme/images/button_sprite_low.png');
  background-repeat: no-repeat;
  height: 32px;
  margin: 2px;
  width: 32px;
}
.social-facebook,
.social-google,
.social-twitter {
  display: inline-block;
  height: 25px;
  vertical-align: top;
  width: 25px;
}
.social-google {
  background-position: -621px -71px;
}
.social-twitter {
  background-position: -581px -71px;
}
.social-facebook {
  background-position: -541px -71px;
}
.social-google:hover {
  background-position: -621px -29px;
}
.social-twitter:hover {
  background-position: -581px -29px;
}
.social-facebook:hover {
background-position: -541px -29px;
}

有人可以帮帮我吗？我真的很感激。我一直在努力解决这个问题。

Answer 1

平板设备没有悬停功能。当用户触摸您的某个图标时，您可能必须使用 jQuery mobile 来“伪造”该效果。

至于为什么当用户单击时您的页面不会去任何地方...... div 元素不应该真的有这样的 onclick 事件。使用锚标签更明智。

<div class="social-media-holder socialtop">
    <a title="Visit our Facebook page" class="social-facebook" href="http://www.facebook.com/ilovetennistoronto" target="_blank">Facebook</a>

    <a title="Visit our Twitter page" class="social-twitter" href="http://www.twitter.com/ilovetennisTO" target="_blank">Twitter</a>

    <a title="Visit our Google+ page" class="social-google" href="https://plus.google.com/u/1/b/117545117809252336887/117545117809252336887" target="_blank">Google+</a>
        </div> 

还有 CSS

.social-media-holder {
  float: right;
  margin: -18px -40px 0 0;
}
.socialtop {
  top: -7px;
}
.social-media-holder a {
  background: url('http://www.ilovetennis.ca/wp-content/themes/I-L-T-Theme/images/button_sprite_low.png') no-repeat;

  height: 32px;
  width: 32px;

  margin: 2px; /* with the display: block; float: left; below; this 2px margin will work properly now */
  text-indent: -3000px; /* hides the text of the icons, and so people with screen readers can still see your social icons */

  display: block;
  float : left; /* please note this as with inline-block would cause white space with the anchor tags on separate lines.*/
  height: 25px;
  vertical-align: top;
  width: 25px;
}

/* icons */
.social-google {
  background-position: -621px -71px;
}
.social-twitter {
  background-position: -581px -71px;
}
.social-facebook {
  background-position: -541px -71px;
}

/* icons : hovers */
.social-google:hover {
  background-position: -621px -29px;
}
.social-twitter:hover {
  background-position: -581px -29px;
}
.social-facebook:hover {
background-position: -541px -29px;
}

希望这会有所帮助（并且有效）。

Answer 2

问题是您的 div “.rt-logo-block” 的宽度为 100%，在小屏幕上覆盖了您的社交图标。只需在小屏幕的 .rt-logo-block 选择器上添加“float:left”即可解决问题

@media only screen and (max-width:650px) { .rt-logo-block { float:right } }

应该这样做。

显然，您可能需要根据需要调整最大宽度值

在页脚中，当社交媒体图标被 div“.rt-grid-4.rt-alpha”重叠时，会发生同样的事情，解决方案是将以下 css 添加到“.social-media-holder” " 对于小屏幕：

@media only screen and (max-width:650px) { .social-media-holder { float: none; text-align: right; margin-right:0px; right:0px; } }