CSS - 在悬停状态中添加其他元素 [英] CSS - adding another elements on hover state

问题描述

全部，

我有一个水平菜单栏。当用户悬停在菜单栏中的每个链接上时，我想在链接下方显示一个小三角形。

这个小三角形不是图像，而是由CSS渲染边界语法。下面的图片和代码：

这是三角形的CSS代码：

  #css_arrow {
 border-color：transparent transparent rgba（111,46,11,0.0）transparent; 
 border-style：solid; 
 border-width：8px; 
 height：0; 
 width：0; 
 position：absolute; 
 top：34px; 
 left：78px; 
  

我想在悬停状态下将三角形添加到菜单项。

有人可以建议如何将此ID添加到悬停状态。我想到使用两个类的菜单栏中的项目，但它不工作。这里是html代码：

 < div id =main_bar> 
< ul> 
< li class =maintabs maintabs_tri>< a href =＃>概述< / a>< / li>< li class =maintabs maintabs_tri>< a href =＃>衣领/领饰< / a>< / li>< li class =maintabs maintabs_tri>< a href =＃> Sleeves< / a> 
< ul> 
< li class =s_leftright>< a href =＃>左袖< / a>< / li> 
< li class =s_leftright>< a href =＃>右袖< / a>< / li& 
< / ul>< / li>< li class =maintabs maintabs_tri>< a href =＃> Body< / a>< / li> 
< / ul> 
< / div> 
  

和CSS不能工作：

  .maintabs_tri：hover {
 border-color：transparent transparent rgba（111,46,11,1）transparent; 
 border-style：solid; 
 border-width：8px; 
 position：absolute; 
 height：0; 
 width：0; 
 top：32px; 
 left：78px; 
} 
  

解决方案

将其放置在所有项目上，但只在悬停时显示，即

 < ul> 
< li> 
< a href =＃>无论< span>< / span>< / a> 
< / li> 
< li> 
< a href =＃>无论< span>< / span>< / a> 
< / li> 
< li> 
< a href =＃>无论< span>< / span>< / a> 
< / li> 
< / ul> 
  

在这种情况下，span将是三角形。我假设你已经适当地塑造了你的灵魂。所以，在你的css：

  ul li a {
 display：block; 
 width：100px; 
 height：32px; 
 float：left; 
 position：relative; 
} 
 
 ul li a：hover span {
 display：block; 
} 
 
 ul li a span {
 display：none; 
 border-color：transparent transparent rgba（111,46,11,1）transparent; 
 border-style：solid; 
 border-width：8px; 
 height：0; 
 width：0; 
 position：absolute; 
 bottom：0; 
 left：50％; 
} 
  

我将它嵌套在锚点内，因为这样可以最大化可点击区域。 / p>

All,

I have a horizontal menu bar. When the user hovers over each link in the menu bar, I want to show a small triangle underneath the link.

This small triangle is not an image but is rendered by CSS border syntax. Image and code below:

Here is the CSS code for the triangle:

#css_arrow {
    border-color: transparent transparent rgba(111,46,11,0.0) transparent;
    border-style: solid;
    border-width: 8px;
    height: 0;
    width: 0;
    position: absolute;
    top: 34px;
    left: 78px;

I want to add the triangle to the menu item in hover state.

Can someone please advise how to go about adding this id to the hover state. I thought about using two classes for the items in the menu bar but its not working out. Here is the html code:

<div id="main_bar">
                <ul>
                    <li class="maintabs maintabs_tri"><a href="#">Overview</a></li><li class="maintabs maintabs_tri"><a href="#">Collar/ Neckline</a></li><li class="maintabs maintabs_tri"><a href="#">Sleeves</a>
                    <ul>
                        <li class="s_leftright"><a href="#">Left Sleeves</a></li>
                        <li class="s_leftright"><a href="#">Right Sleeves</a></li>
                    </ul></li><li class="maintabs maintabs_tri"><a href="#">Body</a></li>
                </ul>           
            </div>  

And the CSS, which doesnt work:

    .maintabs_tri:hover {
    border-color: transparent transparent rgba(111,46,11,1) transparent;
    border-style: solid;
    border-width: 8px;
    position: absolute;
    height: 0;
    width: 0;
    top: 32px;
    left: 78px;
} 

解决方案

You are going to need to place it on all items, but only display it on hover, i.e.

<ul>
   <li>
      <a href="#">Whatever <span></span></a>
   </li>
   <li>
      <a href="#">Whatever <span></span></a>
   </li>
   <li>
      <a href="#">Whatever <span></span></a>
   </li>
</ul>

In this case, span is going to be the triangle. I'm assuming you've already styled your ul an li appropriately. So, in your css:

ul li a {
   display: block;
   width: 100px;
   height: 32px;
   float: left;
   position: relative;
}

ul li a:hover span {
  display: block;
}

ul li a span {
    display: none;
     border-color: transparent transparent rgba(111,46,11,1) transparent;
    border-style: solid;
    border-width: 8px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
}

I'm nesting it within the anchor because that maximizes the clickable area.

这篇关于CSS - 在悬停状态中添加其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！