【问题标题】:Remove Underline on Hover删除悬停时的下划线
【发布时间】:2021-01-22 01:35:30
【问题描述】:

我已尽我所能删除在我的 Shopify 上将鼠标悬停在产品标题上时出现的下划线。关于如何在产品标题出现的任何地方删除此下划线的任何 CSS 建议?

谢谢!!!

【问题讨论】:

  • 能否提供问题的代码或链接?
  • 嘿@MinalChauhan !现在看起来我们 Shopify 的 theme.scss 中用于文本链接的代码是: .text-link { display: inline;边框:0 无;背景:无;填充:0;边距:0; } .text-link--accent { 颜色: var(--color-btn-primary);边框底部:1px 实心当前颜色;底部填充:1px; } .text-link--accent:not([disabled]):hover, .text-link--accent:focus { 颜色: var(--color-btn-primary-focus); }

标签: css hyperlink shopify underline


【解决方案1】:
**Try these two**

a:link {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

【讨论】:

  • hm 由于某种原因似乎不起作用,我之前尝试过类似的方法,但它仍然不会让步
【解决方案2】:

是的。我以前遇到过这个问题。只需使用以下代码 sn-p:

.site-nav__link:hover span.site-nav__label { border-bottom: none; }

来自我的代码 sn-p。只需将其替换为您的 div

【讨论】:

  • 我只是用那个代码 sn-p 替换了我的 div,但是当你悬停时它似乎没有改变下划线。是否可以只为特定类型的链接提供此功能,也就是当您将鼠标悬停在产品标题上时?
  • 是的。您只需为产品标题的相应 div 的超链接添加一个函数。不过,如果它不起作用,只需将您的代码上传到 codepen 并分享链接。
  • 将整个 theme.css 文件复制并粘贴到那里是否足以让您达到顶峰?
猜你喜欢
  • 1970-01-01
  • 2013-09-18
  • 2011-11-03
  • 2014-08-30
  • 1970-01-01
  • 2013-05-26
  • 2013-04-15
  • 2014-04-12
  • 2018-02-17
相关资源
最近更新 更多