Question

当我将鼠标悬停在菜单列表项目顶部时，如何创建一个显示在菜单列表项目顶部的标记？就像他们拥有的标记here一样。只用css创建是可能的吗？

编辑：我不想要你的代码，我只想要一些提示，因为我不知道从哪里开始。

Answer 1

这是您想要实现的最小范例。最重要的部分是:before伪元素和position: relative <a>。请注意，这些“标记”的宽度是伪元素的width属性。（在这种情况下，它是2px）。这是标记伪元素的CSS部分。

a:hover:before {
    content:"";
    width: 2px;
    height: 20px;
    background: #000;
    position: absolute; /* Only works well when the parent is 'position:relative' */
    left: 50%;
    top: -10px;
}

最小范例摘录

html * {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
ul > li {
  display: inline-block;
}
li > a {
  padding: 5px 10px;
  position: relative;
}
a:hover:before {
  content: "";
  width: 2px;
  height: 20px;
  background: #000;
  position: absolute;
  left: 50%;
  top: -10px;
}

<ul>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 2</a>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href="#">Item 4</a>
  </li>
  <li><a href="#">Item 5</a>
  </li>
</ul>

Answer 2

如果你有一个简单的导航：

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

...然后您可以使用:hover CSS伪类创建基本的悬停效果：

ul li a:hover {
  border-top: 2px solid black;
}

Answer 3

如果我们只是谈论CSS，请查看:hover伪类。

这可以与visiblity结合使用，以创建如下内容：

span {
    visibility: hidden;
    font-weight: bold;
}
p:hover span {
    visibility: visible;
}

<p><span>| </span>hello</p>

Answer 4

仅尝试使用CSS：

CSS

    .menu-wrap {
    overflow: hidden;
    width: 100%;
    height: auto;
    position:relative;
}
.menu-wrap div{
    position:relative;
    margin-top:100px;
    display:inline-block;
    border:2px solid red;
    width:100px;
    height:10px;
    padding:10px;
    }
.menu-wrap div:hover:before{
    content:'|'; /*--------you can put image here as marker*/
    position:absolute;
    bottom:40;
    font-size:1.3em;
    margin-left:50px;
    font-weight:bold;
}

HTML

<div class="menu-wrap">              
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
</div>

看看它是不是你想要的。

标记在菜单列表项目的顶部

4 个答案: