Question

Okay so I have a really interesting bug,

I'm using a navigation. This is pure HTML & CSS.

However it has a lot of pseudo properties and because of that I cannot use the tag in that div.

 <div class='box curmudgeon'>
    <a href="#" class="nocolorrr">Housing</a>
    </div>

So the link won't work due to the pseudo properties,

  .box:hover {
  border: 2px solid rgba(0,160,80,0);
  color: #FFF;
}

.box::before, .box::after {
  width: 100%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  top:0;
  left:0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;

}


.curmudgeon::before {
  border-bottom: 3px solid #FFF;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
}

.curmudgeon::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

.box:hover::after, .box:hover::before {
  -webkit-transform: scale(1);
}

Is there any fix? I have tried many things so far and have failed miserable. This is a new doubt for me

Answer 1

为该链接指定.ui-datatable tr>td:nth-child(2) { text-align:right; }高于3，并且要使z-index生效，它还需要z-index以外的位置，即static。

position: relative

.box a {                      /*  added rule  */
  position: relative;
  z-index: 4;
}

.box:hover {
  border: 2px solid rgba(0, 160, 80, 0);
  color: #FFF;
}

.box::before,
.box::after {
  width: 100%;
  height: 100%;
  z-index: 3;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;
}

.curmudgeon::before {
  border-bottom: 3px solid #FFF;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
}

.curmudgeon::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

.box:hover::after,
.box:hover::before {
  -webkit-transform: scale(1);
}

如何添加<a> to this element

1 个答案: