1

我有一个标签设计。由向下箭头标识的活动选项卡。我只想在鼠标悬停时创建那个箭头。我不想将该箭头放置到所有选项卡上。请参考下图。是否有可能在css（可能在伪类之后或之前）或jquery中。

在此处输入图像描述

谢谢。

4

4 回答 4

1

就我个人而言，我不确定 CSS 的功能，但绝对可以使用 JQuery.hover()

JS

$( "li.menu_item" ).hover(
 function() {
  $( this ).append( $( "<span class='arrow'></span>" ) );
 }, function() {
  $( this ).find( "span:last" ).remove();
 }
);

看http://api.jquery.com/hover/

于 2013-11-06T09:48:38.357 回答
1

据我所知，你不能附加一个新的 html 元素。您可以为特定标签、id 或类编写样式。

您已经可以在页面中编写一个 html 结构（使其成为 ,css-> display:none）。在 :hover 之类的 CSS 事件上，您可以显示：阻止它。

但在 Jquery 中，您可以通过以下方法做到这一点。

之前的jquery

之后的jQuery

或搜索 .append() 方法

于 2013-11-06T09:59:01.890 回答
1

:after and :before可以使用伪元素添加形状。

于 2013-11-06T09:41:39.467 回答
1

这是一个如何使用边界技巧的示例：

#menu
{
    height: 50px;
    width: 100%;
    border:1px solid #d0d0d0;
    /*gradient generator ftw*/
    background-image: linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -o-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -moz-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -webkit-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -ms-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.45, rgb(249,249,249)),
        color-stop(0.72, rgb(255,255,255))
    );
}


#menu a
{
    height: 100%;
    width: 100px;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 300%;
    text-decoration: none;
    color: #848484;
}

#menu a:hover
{
    color: black;
}

#menu a:hover:before
{
  content: '';
  position: absolute;
  bottom: -1px; 
  left: 40%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  z-index: 1;
}

#menu a:hover:after
{
  content: '';
  position: absolute;
  bottom: -1px; 
  left: 40%;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #d0d0d0;
}

:after伪类是箭头的边界，伪:before类是箭头本身。

如您所见，:after伪类只是:before伪类下方的另一个箭头。随着宽度增大 1px，您可以看到它伸出来用作边框。

jsFiddle

于 2013-11-06T10:03:29.340 回答