Question

如果链接带有下划线，我希望它在悬停时删除下划线。如果链接没有下划线，我希望它在悬停时获得一个。

使用SASS是否有一种聪明的方法可以做到这一点，而不是为每个链接进行硬编码？

Answer 1

正如其他人所说，要在CSS或SASS中执行此操作，这需要链接的默认样式以及必须应用于替代链接的类或数据属性。

使用javascript可以实现自动智能样式的类型，如果这是可接受的替代方案。我做了一个快速的jQuery小提琴，通过检查文本装饰风格的所有链接。由于每个页面加载扫描所有链接的DOM，因此存在性能缺陷。它还打破了使用CSS领域保持样式的规律，因此如果值得的话，这取决于你。

var links = $('a');

links.each(function (i) {
    var $this = $(this);

    // if this has underline
    if ($this.css('text-decoration') == 'underline') {
        $this.hover(
          function() {
            $this.css('text-decoration', 'none');
          }, function() {
            $this.css('text-decoration', 'underline');
          });
    } else {
        $this.hover(
          function() {
            $this.css('text-decoration', 'underline');
          }, function() {
            $this.css('text-decoration', 'none');
          });
    };
});

https://jsfiddle.net/ym8s6Lwh/

SASS智能备用链接在悬停时强调

1 个答案: