Блог

Главная - Вопросы по программированию - Есть ли способ, которым я могу заставить этот выпадающий список отображаться при наведении курсора мыши на сам список?

Есть ли способ, которым я могу заставить этот выпадающий список отображаться при наведении курсора мыши на сам список?

#html #css #hover #css-grid

#HTML #css #наведите #css-grid

Вопрос:

Если бы я не использовал grid для создания topnav, я бы просто создал div и поместил туда элементы 2, 3, 4 и 5, чтобы они появлялись при наведении курсора мыши на div и оставались такими, даже если вы наведете курсор на сам список. Я пытался реализовать такой div в сетке, но, к сожалению, я не смог заставить его работать. Заранее спасибо :).

 *{
    margin: 0;
    padding: 0;
    color: black;
}
#Topnav1{
    height: 80px;
    width: 100%;
    background-color: plum;
    display: grid;
    grid-template: 1fr / repeat(23,1fr);
    grid-gap: 0px;
    order: 1;
    z-index: 3;
    grid-template-areas: 
    " a a a a a a a b b b f f f g g g h h h h h h h "
    " . . . . . . . c c c . . . . . . . . . . . . . "
    " . . . . . . . d d d . . . . . . . . . . . . . "
    " . . . . . . . e e e . . . . . . . . . . . . . "
    ;
    font: 20px Arial black, Helvetica, sans-serif;
    color: black;
}
.topgrid{
    border: 1px black solid;
    background-color: darkblue;
    align-items: center;
    justify-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}
#Topnav1 a{
    text-decoration: none;
}
.topitem2:hover ~ .topgrid{
    display: flex;
}
.topitem1{grid-area: a;}
.topitem2{grid-area: b;}
.topitem3{display: none; grid-area: c;}
.topitem4{display: none; grid-area: d;}
.topitem5{display: none; grid-area: e;}
.topitem6{grid-area: f;}
.topitem7{grid-area: g;}
.topitem8{grid-area: h;}
img{
    height: 80px;
}  
 <body>
    <nav id="Topnav1">
        <div class="topgrid topitem1"><a href="#"><img src="../Images/logo.png"></a></div>
        <a href="#" class="topgrid topitem2">item 2</a>
        <a href="#" class="topgrid topitem3">item 3</a>
        <a href="#" class="topgrid topitem4">item 4</a>
        <a href="#" class="topgrid topitem5">item 5</a>
        <a href="#" class="topgrid topitem6">item 6</a>
        <a href="#" class="topgrid topitem7">item 7</a>
        <div class="topgrid topitem8">
            <form id="frm1">
                <input id="text" type="text" name="searchbox" placeholder="Search here...">
                <input type="button" onclick="myFunction()" value="Submit">
            </form>
        </div>
    </nav>
</body>

Комментарии:

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

2. @MarkBurns Ты прав. На самом деле, я уже создал нечто подобное с помощью flexbox. Просто я только начал изучать grid и не смог разобраться с этой конкретной проблемой. Так что в основном это просто для учебных целей.

3. Да, Markburns, попробуйте использовать GRID только для макета, а не для элементов в grid. например, используйте простую навигацию с вложенным подменю и показывайте или скрывайте с помощью over родительского элемента li вложенного UL

Ответ №1:

Вот простой пример этого

https://codepen.io/r0binxp/pen/JjXXvEm

сетка используется только для макета. и подменю, вложенное в элемент списка

 #Topnav1{
    height: 80px;
    width: 100%;
    background-color: plum;
    display: grid;
    order: 1;
    z-index: 3;
    font: 20px Arial black, Helvetica, sans-serif;
    color: black;
    grid-template-columns: 3fr 3fr 1fr;
}