CSS - 保持转换：在目标上的元素之后

Question

我的菜单样式存在问题。

菜单如下所示：

每个元素的样式如下：

.gallery-navi-element {
    position: relative;
    float: left;
    text-align: center;
    font-size: 1.7em;
    padding: 0px 60px 0px 60px;
    margin-top: 10px;
    transition: height .8s ease;
}
.gallery-navi-element:hover:after {
    content: " ";
    position: absolute;
    left: 50%;
    /* top: 50%; */
    transform: translate(-50%,0%);
    top: 40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 25px 0 25px;
    border-color: rgb(74, 125, 51) transparent transparent transparent;
    transition: 0.5s all;
} 

通过这种方式，我可以达到这样的效果：

我仍然遇到严重问题，让点击后三角形停留在那里。由于新类覆盖了navi按钮，因此创建添加类的jQuery处理程序似乎根本不起作用。试过玩:target但没有运气。有什么想法吗？

编辑：

添加了一个小提琴：https://jsfiddle.net/a7zs3z6o/

Answer 1

为每个tabindex元素添加gallery-navi-element：

<div class="gallery-navi-element" id="gallery-show-wszystkie" tabindex="1">Wszystkie</div>

这将使他们在点击时可以集中注意力。

然后，您需要删除焦点元素上显示的默认大纲，您可以使用：

.gallery-navi-element:focus {
  outline: none;
}

Updated Fiddle

Answer 2

而不是更改导航链接＆＃39;类，只需添加一个与.hover具有相同样式的新:hover类。然后你就不会遇到很多覆盖样式的问题。

如果您将CSS简化为仅包含处于悬停状态/已添加类状态的转换样式，则执行此操作可能会更少。

.gallery-navi-element:after {
  content: " ";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 30px;
  width: 0;
  height: 0;
  border-style: solid;
  /* border-width: 0px 25px 0 25px; */
  border-width: 10px 25px 0 25px;
  border-color: rgb(74, 125, 51) transparent transparent transparent;
  transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
  top: 40px;
  border-top-width: 20px;
}

请注意border-top-width转换的唯一原因是，您的三角形不会掩盖前几个链接中Y的底部。

示例：

＆＃13;

＆＃13;

var navLinks = document.getElementsByClassName('gallery-navi-element');

for(var i=0,l=navLinks.length;i<l;i++) {
  navLinks[i].addEventListener('click', function(){
    for(var i=0,l=navLinks.length;i<l;i++) {
      navLinks[i].classList.remove('hover');
    }
    this.classList.add('hover');
  }, false);
}

＆＃13;

.gallery-navi {
  border-radius: 28px;
  width: 950px;
  height: 55px;
  background-color: rgb(74, 125, 51);
  margin: 0px auto 20px auto;
}
.gallery-navi-wrapper {
  margin: 0 auto;
  width: 870px;
}
.gallery-navi-separator {
  width: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  height: 36px;
  float: left;
  margin-top: 10px;
}
.gallery-navi-element {
  position: relative;
  float: left;
  text-align: center;
  font-size: 1.7em;
  padding: 0px 60px 0px 60px;
  margin-top: 10px;
  transition: height .8s ease;
}
.gallery-navi-element:after {
  content: " ";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 30px;
  width: 0;
  height: 0;
  border-style: solid;
/*   border-width: 0px 25px 0 25px; */
  border-width: 10px 25px 0 25px;
  border-color: rgb(74, 125, 51) transparent transparent transparent;
  transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
  top: 40px;
  border-top-width: 20px;
}

＆＃13;

<div class="gallery-navi">
  <div class="gallery-navi-wrapper">
    <div class="gallery-navi-element" id="gallery-show-wszystkie">Wszystkie</div>
    <div class="gallery-navi-separator"></div>
    <div class="gallery-navi-element" id="gallery-show-produkty">Produkty</div>
    <div class="gallery-navi-separator"></div>
    <div class="gallery-navi-element" id="gallery-show-tartak">Tartak</div>
    <div class="gallery-navi-separator"></div>
    <div class="gallery-navi-element" id="gallery-show-sklad">Skład</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;