Как сделать так, чтобы раскрывающееся меню появлялось только при наведении курсора на поисковую систему? - PullRequest
Новая
       2

Как сделать так, чтобы раскрывающееся меню появлялось только при наведении курсора на поисковую систему?

0 голосов
/ 21 июня 2020

Итак, я создавал начало своего, надеюсь, полезного веб-сайта. Я начал делать заголовок и часть меню. В части поисковой системы я намерен создать раскрывающееся меню с некоторыми параметрами при наведении курсора на поисковую систему, пока оно не исчезнет. Я закомментировал отображение кода CSS: none, чтобы вы могли видеть, как выглядит раскрывающийся список. Я попробовал псевдокласс .dropdown: hover, но это не сработало. Как сделать так, чтобы раскрывающееся меню появлялось только при наведении курсора на поисковую систему? Связанное изображение как пример того, как оно выглядит, а не как должно

HTML

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>SerFin</title>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <style>
      .title {
        font-family: 'Cinzel', cursive;
      }
    </style>
    <link href='test.css' rel='stylesheet'/>
  </head>
  <body>
    <header>
      <nav>
        <ul class="menu">
          <li><a href='#'>Customer Service</a></li>
          <li><a href='#'>Submission</a></li>
          <li class="dropdown">Search Engine ▾<li>
        </ul>
        <ul class="dropdown-menu">
          <li><a href="#">Universities</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Courses</a></li>
          <li><a href="#">Internships</a></li>
          <li><a href="#">Services</a></li>
        </ul>

        <ul class="setup">
          <li><a href='#'>Login</a></li>
          <li><a href="#">Sign up</a></li>
        </ul>
      </nav>
      <img class="logo" src="Logo.jpg"></img>
    </header>
  </body>
</html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

  body {
font-size: 18px;
line-height: 1.8em;
  }

  header {
background-color:#5D6063;
  }

  nav {
display: flex;
justify-content: space-around;
background-color: #54575A;
width: 100%;
height: 40px;
}

  li {
list-style: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
  }

  a {
    color: #D3D3D3;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    color: #54A5C4;
  }

  .menu {
    color: #EEEEEE;
    padding: 5px;
  }

  .setup {
    color: #EEEEEE;
    padding: 5px;
  }

  .title {
color: white;
display: flex;
justify-content: center;
padding: 150px;
  }

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 100px;
}
/*
---------------------------------------------------------------------------------------------
All of this is the heading, from now on everything has to do with the dropdown menu
*/
.dropdown {
  position: relative;
  z-index: 2;
}

 .dropdown-menu {
  display: flex;
  flex-direction: column;
  background: #54575A;
  border-radius: 1px;
  padding-top: 60px;
  position: absolute;
  top: -25px;
  left: 490px;
  z-index: 1;
}

.dropdown-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown-menu li:last-of-type {
  border-bottom: none;
}

.dropdown > span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

/*.dropdown-menu {
  display: none;
}*/

Ответы [ 3 ]

0 голосов
/ 21 июня 2020

Если вы используете Javascript, вы можете использовать следующее приложение, onmouseover внутри элемента html. Например:

image

или вы можете сделать следующее в файле javascript: 

object = document.getElementByID("element") (or any other reference to element)
object.addEventListener("mouseover", myScript);

Мне помогли: https://www.w3schools.com/jsref/event_onmouseover.asp

Надеюсь, это было полезно.

0 голосов
/ 21 июня 2020 
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>SerFin</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $('.dropdown').hover(function(){
            $('.dropdown-menu', this).stop(true, true).slideDown(0);
            $(this).addClass('open');
        }, 
        function(){
            $('.dropdown-menu', this).stop(true, true).slideUp(0);
            $(this).removeClass('open');
        });     
        });
</script>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 18px;
    line-height: 1.8em;
}

header {
    background-color:#5D6063;
}

nav {
    display: flex;
    justify-content: space-around;
    background-color: #54575A;
    width: 100%;
    height: 40px;
}

li {
    list-style: none;
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
}

a {
    color: #D3D3D3;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #54A5C4;
}

.menu {
    color: #EEEEEE;
    padding: 5px;
}

.setup {
    color: #EEEEEE;
    padding: 5px;
}

.title {
    color: white;
    display: flex;
    justify-content: center;
    padding: 150px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 100px;
}

.dropdown  {
    position: absolute;
    z-index: 2;
    height: 40px 
}

.dropdown-menu {
    display: block;
    flex-direction: column;
    background: #54575A;
    border-radius: 1px;
    padding-top: 0px;
    position: absolute;
    top: 35px;
    left: 0px;
    z-index: 1;
    min-width: 100%
}

.dropdown-menu li {
    list-style: none;
    border-bottom: 1px solid #FFF;
    padding: 0 40px 5px 20px;
    margin: 10px;
}

.dropdown-menu li:last-of-type {
    border-bottom: none;
}

.dropdown > span {
    z-index: 2;
    position: relative;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
}

.setup :hover li a {
    display: block;
    height: 25px;
    line-height: 22px;
    float: right;
    background: transparent url(line/transparent.gif);
    padding: 0 0px;
    margin: 0;
    white-space: nowrap;
    color: #c80c0d;
    font-size: 12px;
    font-family: 'tahoma';
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed #333;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}
</style>

</head>
 
<body>
 
<header>
    <nav><!-- Start Navbar -->
        <ul class="menu">
            <li><a href='#'>Customer Service</a></li>
            <li><a href='#'>Submission</a></li>  
            <li class="dropdown">
                <a class="dropdown-toggle" href="#">Search Engine <b class="caret"></b><a>
                <ul class="dropdown-menu">
                    <li><a href="#">Universities</a></li>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Internships</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </li>
        </ul>
        <ul class="setup">
            <li><a href='#'>Login</a></li>
            <li><a href="#">Sign up</a></li>
        </ul>

     </nav> 
</header>

</body>
</html>
0 голосов
/ 21 июня 2020

Вы можете использовать в этом обычном javascript или jquery. Вот как это сделать с помощью jquery. $('.dropdown').hover( function(){ $('.dropdown-menu').show(); });

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...