Question

我连续做了3列。我试图获得一个箭头显示的效果，因为光标悬停其中一个列或单击其中一个列。是否有内置的html或CSS类来执行此操作？ viewDidLoad提前致谢！

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 V形的示例。

$(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>

在底部做一个箭头

3 个答案: