HTML, чтобы заставить sub 3 исчезать при наведении на 2 и 2 исчезать при наведении на 1

0

Простой код для большинства, я начинаю css.

Я хочу, чтобы код в первом продукте 1, когда он отображает sub 1 2 и 3, для этого.

Я хочу, чтобы 3 исчезли при наведении на 2 и 2, чтобы исчезнуть при падении на 1, поскольку он идет на продукт 2. Я намерен вставлять видеоформаты и предустановки?

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

<link href="css_flyoutverticalmenu.css" type="text/css" rel="Stylesheet"/>
<div id="menuwrapper">
    <ul>
       <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a>
                    <ul>
                        <li><a href="#">Sub Product 1</a>
                        <ul><li><a href="#">Sub 2</a>
                            <ul><li><a href="#"> 3</a></li></ul>
                        </ul>
                    </ul>
                <li><a href="#">Product 2</a></li> 
            </ul>
       </li>

  </ul>
  • 1
    Сделайте демо на JSfiddle.
Теги:

1 ответ

0

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

function hoverOverHeadLine(){
    var headLine = document.GetElementById("someId");
    headLine.Visibility = false;
}

эта функция ищет элемент с someId установленным как атрибут ID в разметке, а затем скрывает его.

Кроме того, вы можете использовать теги заголовков HTML (<h1>, <h2>,...) для своих headLines. Затем выражение document.GetElementsByTagName("h2") даст вам набор всех тегов, определенных как заголовок 2. Затем перечислите каждый заголовок и установите его видимость на false. Но это работает, только если у вас есть только один список на вашей странице.

Вы могли бы получить ссылку DOM в свой список (в вашем примере тег <li> в первой строке) и использовать его для поиска, а затем для всех заголовков.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню