CSS - добавление других элементов при наведении - PullRequest
Новая
       6

CSS - добавление других элементов при наведении

0 голосов
/ 02 февраля 2011

Все,

У меня горизонтальная строка меню.Когда пользователь наводит курсор на каждую ссылку в строке меню, я хочу показать маленький треугольник под ссылкой.

Этот маленький треугольник не является изображением, а отображается с помощью синтаксиса границы CSS.Изображение и код ниже:

enter image description here

Вот код 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;

Я хочу добавить треугольник к элементу меню при наведенииstate.

Может кто-нибудь посоветует, пожалуйста, как добавить этот идентификатор в состояние наведения.Я думал об использовании двух классов для пунктов в строке меню, но это не сработало.Вот HTML-код: 

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

И 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;
}

1 Ответ

1 голос
/ 02 февраля 2011

Вам нужно будет разместить его на всех элементах, но отображать его только при наведении, то есть 

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

В этом случае span будет треугольником.Я предполагаю, что вы уже разработали свой ul a li li соответствующим образом.Итак, в вашем 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%;
}

Я вкладываю его в якорь, потому что это максимизирует кликабельную область.

...