如何使旁边的箭头，伪：悬停::元素

之前，这是我的代码如何使旁边的箭头，伪：悬停::元素

.privacycheck1 { 
 
    position: relative; 
 
    top: 265px; 
 
    background-color: #CF0000; 
 
    width: 24px; 
 
    height: 24px; 
 
    left: 843px; 
 
    border-radius: 50px; 
 
    border: 5px #E60000; 
 
} 
 
.privacycheck1::before { 
 
    position: relative; 
 
    display: block; 
 
    height: 20px; 
 
    width: 200px; 
 
    left: 30px; 
 
} 
 
.privacycheck1:hover::before { 
 
    content: 'This information is private'; 
 
    width: 125px; 
 
    height: 35px; 
 
    background-color: #CF0000; 
 
    left: 40px; 
 
    top: -10px; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    font-weight: 100px; 
 
    color: white; 
 
    padding: 10px; 
 
}

<div class="privacycheck1"></div>

我想使它所以当有人hovers在privacycheck1，我想他们看到一个箭头连接到指向privacycheck1的圆圈的方框。无论如何要在课堂上课？

来源

2015-10-21 Leo L.

您可以使用额外的span元素来创建此项。

首先使用span创建箭头的尾部，然后使用after伪元素上的border-hack创建箭头。你可以找到各种各样箭头的here

.privacycheck1 { 
 
    position: relative; 
 
    top: 30px; 
 
    background-color: #CF0000; 
 
    width: 24px; 
 
    height: 24px; 
 
    left: 30px; 
 
    border-radius: 50px; 
 
    border: 5px #E60000; 
 
} 
 
.privacycheck1::before { 
 
    position: relative; 
 
    display: block; 
 
    height: 20px; 
 
    width: 200px; 
 
    left: 30px; 
 
} 
 
.privacycheck1:hover::before { 
 
    content: 'This information is private'; 
 
    width: 125px; 
 
    height: 30px; 
 
    background-color: #CF0000; 
 
    left: 40px; 
 
    top: -10px; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    font-weight: 100px; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
.arrow { 
 
    position: absolute; 
 
    width: 15px; 
 
    height: 5px; 
 
    background: green; 
 
    left: 20px; 
 
    top: 8px; 
 
    display:none; 
 
} 
 
.arrow:after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 5px solid transparent; 
 
    border-bottom: 5px solid transparent; 
 
    border-left: 5px solid green; 
 
    left:15px; 
 
    top:-2px; 
 
    display:none; 
 
    } 
 
.privacycheck1:hover span,.privacycheck1:hover span:after{ 
 
    display:block; 
 
    }

<div class="privacycheck1"><span class="arrow"></span> 
 
</div>

来源

2015-10-21 03:39:41 Akshay

你并不需要一个额外的跨度。你可以使用：之后就像你之前使用的a：之前一样。

.privacycheck1:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 100%; 
    width: 0; 
    height: 0; 
    margin-top: -15px; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 15px solid #CF0000; 
}

如果您使用top：50％;和边缘顶部负半个箭头高度，它将始终在垂直中心完美对齐。在这种情况下，我给了箭头高度：30px;所以保证金最高是-15px

哦，你犯了一个错误，你悬停：之前。 'font-weight：100px;'不存在，您可以使用'粗体'，'700'或其他值。

另一个技巧，将它添加到您的悬停：前

left: calc(100% + 15px);

这样，你的框会一直有“点”和文本框之间适当的距离。该框将使用父元素的宽度（元素的位置：relative;）+ 15px（箭头的宽度）从左侧对齐。

来源

2015-10-21 10:16:48 Gideon

如何使旁边的箭头，伪：悬停::元素

回答

相关问题