在底部做一个箭头

Question

我连续做了3列。我试图得到一个效果，即箭头显示为光标悬停在其中一列或其中一个被点击时。有没有内置类的HTML或CSS来做到这一点？ the link to my code: https://codepen.io/BeauBo/pen/gxmpLK?editors=1111提前致谢！

Answer 1

这里没有内置类。只需将您想要的光标添加到该列的ID即可。

#online { 
    cursor: e-resize; 
} 

尝试其中之一： E-调整 S-调整 W-调整 NE-调整 NW-调整 SE-调整 SW-调整

https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=e-resize

我叉你的CodePen：https://codepen.io/solona/pen/OjpdbE?editors=1111

Answer 2

我编辑你的针是不完全确定你想要什么，但这是我想出的。

.arrow-bar:hover:after{ 
    content: ''; 
    position: absolute; 
    left: 42%; 
    top: 100%; 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid salmon; 
    clear: both; 
} 

https://codepen.io/anon/pen/LjWqbx?editors=1111

Answer 3

实施例与fontawesome经由伪代码施加字形。

$(document).ready(function(){ 
 
/* var url = "https://wind-bow.glitch.me/twitch-api/channels/ESL_SC2?callback=?"; 
 
    $.getJSON(url,function(data){ 
 
    console.log(data); 
 
    }); 
 
});*/ 
 
    
 
/*Keep .outline in the center of window*/ 
 
function mov_outline(){ 
 
var wid_height = $(window).height(); 
 
var wid_width = $(window).width(); 
 

 
var outline_height = $('.outline').height(); 
 
var outline_width = $('.outline').width(); 
 
    
 
    $(".outline").css('top',wid_height/2-outline_height/2).css('left',wid_width/2-outline_width/2); 
 
    } 
 
    mov_outline(); 
 
    $(window).resize(function(){ 
 
    mov_outline();    
 
        }); 
 
    
 
    }); 
 
/**************/

body{ 
 
    background: pink; 
 
    
 
} 
 
.outline{ 
 
    position: absolute; 
 
    width: 20%; 
 
    
 
    background:none; 
 
} 
 
.display{ 
 
    width: 100%; 
 
    height: 50px; 
 
    background: salmon; 
 
    
 
    color: white; 
 
} 
 
#all,#online{ 
 
    border-right: 1px solid white; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items:center; 
 
    justify-content: center; 
 
    
 
} 
 
#offline{ 
 
    
 
    height: 100%; 
 
    display: flex; 
 
    align-items:center; 
 
    justify-content: center; 
 
} 
 

 
#all:hover:after, #online:hover:after, #offline:hover:after { 
 
    content: "\f13a"; 
 
    font-family: FontAwesome; 
 
    font-size: 2em; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 50%); 
 
    bottom: 0; 
 
    color: blue; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <div class="outline"> 
 
    <div class="row display"> 
 
     <div class="col-xs-4 " id="all">All</div> 
 
     <div class="col-xs-4 "id="online">Online</div> 
 
     <div class="col-xs-4 "id="offline">Offline</div> 
 
    </div> 
 
    
 
    </div> 
 
</div>