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

Posted 2023-05-09

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

【英文标题】：Social icons won't work in mobile and in some tablets (Link doesn't work and they don't change image on hover)

【发布时间】：2014-09-18 10:23:21

【问题描述】：

我创建了一些社交媒体图标并使用以下 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;

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

【参考方案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;

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

【讨论】：

检查您的网站（我喜欢网球...）您的社交媒体图标可能在垂直方向上偏离了 1 像素，因此会出现摆动。除非有意：D

【参考方案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;

【讨论】：

主要问题在于页脚中页面底部的那些。

那里也是同样的问题。您应该将以下 css 添加到 .social-media-holder 类中： float: none;文本对齐：右；这将产生相同的效果，但会停止 .rt-grid-4.rt-alpha

的重叠