指向按钮的CSS三角形
指向按钮的CSS三角形
提问于 2018-07-16 19:43:31
我有以下从cssarrowplease得到的标记
.arrow_box {
position: relative;
background: #88b7d5;
border: 2px solid #c2e1f5;
margin-top: 20px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 13px;
margin-left: -13px;
}<input type="submit" id="btn1" />
<input type="submit" id="btn2" />
<input type="submit" id="btn3" />
<div class="arrow_box">My content goes here</div>
我不擅长做UI，我想知道当我悬停在每个按钮上时，我div的三角形指针指向每个按钮中间的方法是什么？这只能通过HTML/CSS完成吗?还是我需要应用javascript？
回答 1
Stack Overflow用户
发布于 2018-07-16 19:53:13
您只需更改悬停时箭头的左侧位置(也可在非悬停时将其隐藏)
.arrow_box {
position: relative;
background: #88b7d5;
border: 2px solid #c2e1f5;
margin-top: 20px;
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
display: none; /* add this so arrow is hidden if no button is hovered */
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 13px;
margin-left: -13px;
}
#btn1:hover~.arrow_box:after, /* this means whilst button 1 is hovered style the after of any following siblings with the class arrow box */
#btn1:hover~.arrow_box:before {
display: block;
left: 30px; /* these are examples only, if you want it dead in the middle of the button, I would give the button a width so you know what the middle is */
}
#btn2:hover~.arrow_box:after,
#btn2:hover~.arrow_box:before {
display: block;
left: 90px;
}
#btn3:hover~.arrow_box:after,
#btn3:hover~.arrow_box:before {
display: block;
left: 150px;
}<input type="submit" id="btn1" />
<input type="submit" id="btn2" />
<input type="submit" id="btn3" />
<div class="arrow_box">My content goes here</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51361049
复制相关文章
相似问题