css - 2 三 Angular 形按钮仅重叠 CSS

Question

我正在编写一个 subreddit，所以我只能修改 CSS，我正在尝试创建 2 个三 Angular 形按钮并将其放置成一个正方形。重点是我想让它们分开并且都可以点击，当我像这样重叠时

triangle buttons

由于第二个三 Angular 形容器上的 overflow: hidden，第一个变得不可点击。

这是我的代码:

.submit-link .morelink {
   
    height:120px;
    width: 120px;
    border:0;
    position:relative;
    overflow: hidden;
    background-image: none; 
    float: left;
}


.sidebox submit submit-link {
    overflow: hidden;
}


.submit-link .morelink .login-required{

    position: absolute;
    bottom: 100px;
    right: 102px;
    width: 250px;
    height: 200px;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.submit-link .morelink .nub {
    
    background-image: url(%%linkicon%%);
    background-size: 100%;
    width: 60px;
    background-position: none;
    opacity: 0;
}

.submit-text .morelink {
    
    margin-left: -110px;
    height:120px;
    width: 120px;
    border:0;
    position:relative;
    overflow: hidden;
    background-image: none; 
    float: left;
    background: none;
    margin-top: 10px;
   
    
}

.sidebox submit submit-text{
     overflow: hidden;
     

}

.submit-text .morelink .login-required{
    
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 200px;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    
}


.submit-text .morelink .nub {
    
    background-image: url(%%texticon%%);
    background-size: 100%;
    width: 60px;
    background-position: none;
    opacity: 0;
   
}

.morelink:hover, .mlh {
    border-color: #879eb4;
    background-image: none;
}

.spacer .submit-text.morelink {
    float: left;
    width: 140px;
}

.titlebox {
 
        padding-top: 300px;
}

<div class="side">
  <div class="spacer">
    <div id="ad_main_top" class="ad300x250">
    </div> 
   </div>
  <div class="spacer">
    <div class="sidebox submit submit-link">
      <div class="morelink">
        <a href="https://www.reddit.com/r/paladinsideas/submit" data-event-action="submit" data-type="subreddit" data-event-detail="link" class="login-required access-required" target="_top">Invia un nuovo link</a>
        <div class="nub">
        </div>
      </div>
    </div>
  </div>
  <div class="spacer">
    <div class="sidebox submit submit-text">
      <div class="morelink">
        <a href="https://www.reddit.com/r/paladinsideas/submit?selftext=true" data-event-action="submit" data-type="subreddit" data-event-detail="self" class="login-required access-required" target="_top"></a>
        <div class="nub">
        </div>
      </div>
    </div>
  </div>
  <div class="spacer"><div class="titlebox">

</div>
  </div>
</div>

Answer 1

这可以解决您的问题:

.morelink a {
    z-index: 50;   /*** 1 ***/
}
.morelink:hover, .morelink:hover a {
    z-index: 1;    /*** 2 ***/
}
.morelink a:hover {
    z-index: 100;  /*** 3 ***/
}

1. 我们将 anchor 的默认 z-index 设置为 50
2. 一旦容器悬停，我们将容器(和 anchor )的 z-index 设置为 50。
3. 如果 anchor 本身悬停 - 我们将其 z-index 设置为 100。

这是一个工作片段:

.submit-link .morelink {
   
    height:120px;
    width: 120px;
    border:0;
    position:relative;
    overflow: hidden;
    background-image: none; 
    float: left;
}


.sidebox submit submit-link {
    overflow: hidden;
}
.morelink a {
  z-index: 50;
}
.morelink:hover, .morelink:hover a {
  z-index: 1;
}
.morelink a:hover {
  z-index: 100;
}
.submit-link .morelink .login-required{
    position: absolute;
    bottom: 100px;
    right: 102px;
    width: 250px;
    height: 200px;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.submit-link .morelink .nub {
    
    background-image: url(%%linkicon%%);
    background-size: 100%;
    width: 60px;
    background-position: none;
    opacity: 0;
}

.submit-text .morelink {
    
    margin-left: -110px;
    height:120px;
    width: 120px;
    border:0;
    position:relative;
    overflow: hidden;
    background-image: none; 
    float: left;
    background: none;
    margin-top: 10px;
   
    
}

.sidebox submit submit-text{
     overflow: hidden;
     

}

.submit-text .morelink .login-required{
    
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 200px;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    
}


.submit-text .morelink .nub {
    
    background-image: url(%%texticon%%);
    background-size: 100%;
    width: 60px;
    background-position: none;
    opacity: 0;
   
}

.morelink:hover, .mlh {
    border-color: #879eb4;
    background-image: none;
}

.spacer .submit-text.morelink {
    float: left;
    width: 140px;
}

.titlebox {
 
        padding-top: 300px;
}

<div class="side">
  <div class="spacer">
    <div id="ad_main_top" class="ad300x250">
    </div> 
   </div>
  <div class="spacer">
    <div class="sidebox submit submit-link">
      <div class="morelink">
        <a href="https://www.reddit.com/r/paladinsideas/submit" data-event-action="submit" data-type="subreddit" data-event-detail="link" class="login-required access-required" target="_top">Invia un nuovo link</a>
        <div class="nub">
        </div>
      </div>
    </div>
  </div>
  <div class="spacer">
    <div class="sidebox submit submit-text">
      <div class="morelink">
        <a href="https://www.reddit.com/r/paladinsideas/submit?selftext=true" data-event-action="submit" data-type="subreddit" data-event-detail="self" class="login-required access-required" target="_top"></a>
        <div class="nub">
        </div>
      </div>
    </div>
  </div>
  <div class="spacer"><div class="titlebox">

</div>
  </div>
</div>