Question

我有一个导航栏，它使用CSS转换在悬停时在链接顶部扩展一个栏。我还想拥有一个#active id，所以相应的链接应用了结束样式。由于CSS转换语法的性质，我无法做到这一点。

#active:before {
    position: absolute;
    top: 0;
    left: 0;
    margin-top:2px;
    width: 100%;
    height: 6px;
    background: red;
    content: '';
}

为了澄清，我希望更改文本颜色并在页面加载时显示条形，与应用的样式相同：悬停。当然，这种风格只有当它悬停在动画上时才会应用。

感谢您的期待，希望有人有个主意。

Answer 1

您只需将transform: scaleX(1)!important应用于活动课程。它必须重要或不起作用。

.active:before {
  transform: scaleX(1)!important;
}

如果您在单击菜单项时动态更改页面内容，则可以使用这样的javascript来切换活动类。

var menu = document.querySelector('.nav');                     // Select '.nav' from document and store it in var menu 
document.onclick = function(e) {                               // when the document is clicked
  if (menu.contains(e.target)) {                               // if the menu contains the clicked element
    var active = menu.querySelector('.active');                // select the current active item from menu
    active.className = active.className.replace('active', ''); // remove the active class from the currently active item
    e.target.className += 'active';                            // add the active class to the clicked element
  }
}

（Codepen Example）

在上面的示例中，我冒昧地修复了html中的列表标记。

ul元素的唯一直接后代应该是li元素。

如果将锚点嵌套在列表项中，则可以实现相同的外观和行为，然后将应用于列表项的样式应用于锚点。

需要为“有效”导航链接保持页面加载的CSS转换

1 个答案: