我正在编程一个subreddit所以我只能修改CSS，我试图创建2个三角形按钮，并把它像它形成一个正方形。关键是我希望它们是分开的并且都是可点击的，当我像这样重叠时
三角形按钮
由于第二个三角形容器上的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>这可以解决你的问题:
.morelink a {
z-index: 50; /*** 1 ***/
}
.morelink:hover, .morelink:hover a {
z-index: 1; /*** 2 ***/
}
.morelink a:hover {
z-index: 100; /*** 3 ***/
}
- 我们将锚的默认z-index设置为50
- 一旦容器悬停，我们将容器(和锚点)的
z-index设置为50。 - 如果锚本身是悬停的-我们设置它的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>您可以使用transform并根据您的需要调整transform-origin。
的例子:
div {
width: 5vw;
height: 5vw;
margin: 1em;
padding: 1em;
position: relative;
border: solid 1em transparent;
overflow: hidden;
box-shadow: 0 0 0 3px;
background:turquoise
}
div a {
position: absolute;
top: -2vw;
left: -2vw;
right: -2vw;
bottom: -2vw;
background: red;
transform: rotate(45deg);
transform-origin: 80% -15%
}
div a + a {
background: yellow;
z-index: 1;
transform-origin: 30% 120%
}<div>
<a href="#one" title="one"></a>
<a href="two" title="two"></a>
</div>