如何在mouseover div上添加向下箭頭

Question

我正在使用全日歷。 如果我將鼠標懸停在任何日期字段上，一個div彈出窗口將像工具提示一樣打開它。

在這里我想添加一個向下箭頭，

如何在div中添加此向下箭頭。 我有一個例子。

小提琴

 $(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var events_array = [ { title: 'Test1', start: new Date(2012, 8, 20), tip: 'Personal tip 1'}, { title: 'Test2', start: new Date(2012, 8, 21), tip: 'Personal tip 2'} ]; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, selectable: true, events: events_array, eventRender: function(event, element) { element.attr('title', event.tip); } }); }); $(document).on('hover', '.fc-day-number', function(){ $('#cal-info').addClass('hide'); var data = $(this).html(); var offset = $(this).offset(); $('#cal-info').css('left', offset.left); $('#cal-info').css('top', (offset.top - 40)); $('#cal-info').html('information about: '+$(this).html()+'<br>Link to google: <a href="http://google.com" target="_blank">Google</a>'); //p.html( "left: " + offset.left + ", top: " + offset.top ); $('#cal-info').removeClass('hide'); }); 

 .tag{ background-color:#000; color:#fff; padding:3px; max-height:60px; overflow:auto; position: fixed; z-index:999; } 

 <div style="border:solid 2px red;"> <div id='calendar'></div> </div> <div class="tag hide" id="cal-info"> </div> 

Answer 1

由於您的容器的position: fixed是position: fixed ，因此我將overflow更改為visible ，並將偽元素添加到.tag元素以使用border屬性創建三角形。

jsfiddle.net/v98sb2a0/1/

關於形狀，您可以查看有關CSS制作形狀的CSS技巧文章

Answer 2

更新CSS：

.tag{
  background-color:#000;
  color:#fff;
  padding:3px;
  max-height:60px;
  overflow:auto;
  position: fixed;
  z-index:999;
  background-image: url("http://i.stack.imgur.com/P1bAW.png");
}

這會將圖像設置為您的div背景。 您可以設置本地路徑來代替此URL。