Question

我有一个<a>标签，里面有文字。
在手机屏幕上，文字太长，所以我把它隐藏在一定的宽度当它被隐藏时，我想要激活鼠标悬停文本我尝试使用<a title="...">但是当屏幕宽度足以容纳常规文本时，鼠标悬停文本仍然可见。

如何以特定的屏幕宽度禁用鼠标悬停文本？
或者：任何更好的替代品都有鼠标悬停在一定宽度的文本？

@media (max-width: 700px) {
  #changePw {
    font-size: 0;
  }
  .fa {
    font-size: initial;
  }
}

<a id="changePw" href="#" title="Change Password">
  <i class="fa">Icon</i> Change Password
</a>

Answer 1

好的，我想我会做的是使用伪类：

＆＃13;

@media (max-width: 700px) {
  #changePw {
    font-size: 0;
  }
  #changePw:hover:after  {
    content: "Change Password";
    padding: 4px 8px;
    background-color: #333;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    display: block;
    width: 5em;
  }
  .fa {
    font-size: initial;
  }
}

＆＃13;

<a id="changePw" href="#">
  <i class="fa">Icon</i> Change Password
</a>

＆＃13;

（不要忘记在宽度小于700像素的窗口中进行测试）

Answer 2

用CSS删除它是不可能的，你需要像这样使用javascript / jQuery：

$('a').mouseover(function(e){
    if($(window).width() > 700){
        $('a').removeAttr("title");
    }
    else{
        $('a').attr("title", "Title");
    }
});

Working fiddle

这是一个快速/肮脏的解决方案，我认为这不适合SEO。

（IMO）正确的方法是在桌面和移动设备上始终拥有标题标签。

编辑：拼写

以特定宽度显示鼠标悬停文本

2 个答案: