如何使旁邊的箭頭，僞：懸停::元素

之前，這是我的代碼如何使旁邊的箭頭，僞：懸停::元素

.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

如何使旁邊的箭頭，僞：懸停::元素

回答

相關問題