Question

我想在鼠标悬停时打开下拉列表然后在mouseout时需要关闭。我可以打开下拉列表但不能关闭下拉列表。

我的代码是，

header.php 文件中的

，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost/performance/css/header.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<?php
include_once 'Connection.php';
session_start();
echo '<body>
    <div class="fixed-header">
        <div ="main-div">
            <nav>    
                <a href="http://localhost/Performance/Project_form.php" target=>Create Project</a>
                <button href="" onmouseover="myFunction1()" class="dropbtn1">Project</button>
                <a href="http://localhost/performance/Create_test.php">Create Test</a>
                <button href="" onmouseover="myFunction()" class="dropbtn">Test</button>

                    <div id="nav">
                      <div id="myDropdown" class="dropdown-content">';
                            $selected_val=null;
                            $test_name=null;
                            function loadtest_name(){
                                $test=array();
                                $sql="select loadtest from create_load_test;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['loadtest'];
                                }
                                return $test;
                            }
                            //Get file name
                            function load_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(loadtest) from create_load_test;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(loadtest)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=loadtest_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=load_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

                    <div id="nav1">
                      <div id="myDropdown1" class="dropdown-content1">';
                            $selected_val=null;
                            $test_name=null;
                            function project_name(){
                                $test=array();
                                $sql="select project_name from project;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['project_name'];
                                }
                                return $test;
                            }
                            //Get file name
                            function project_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(project_name) from project;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(project_name)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=project_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=project_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname1"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

             </nav>          
        </div>
    </div>  
    <div class="fixed-footer">
        <div class="container">Merahkee Tech Souluctions,Hubli</div>        
    </div>';
?>
     <script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
         document.getElementById("myDropdown").classList.toggle("show");
  }

// Close the dropdown if the user clicks outside of it
window.onmouseover = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');

      }
    }
  }
}


function myFunction1() {
         document.getElementById("myDropdown1").classList.toggle("show");
  }

// Close the dropdown if the user clicks outside of it
window.onmouseover = function(event) {
  if (!event.target.matches('.dropbtn1')) {

    var dropdowns1 = document.getElementsByClassName("dropdown-content1");
    var j;
    for (j = 0; j < dropdowns1.length; j++) {
      var openDropdown = dropdowns1[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');

      }
    }
  }
}

</script>
</body>
</html>

在 header.css 文件中，

body{        
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 6px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 50px;
        display: inline-block;
        text-decoration:none
    }
.dropbtn1 {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
    background-color: ;
}

.fixed-header {
    position: relative;
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color: ;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4 cm
    display:inline-block;
}

.dropdown-content1 a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4 cm
}

.fixed-header a:hover {background-color: #f1f1f1}
.container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }

#nav1{margin-left: 5cm}

.dropbtn {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: ;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: ;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4 cm
    display:inline-block;
}

.dropdown-content a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4 cm
}

#nav{margin-left: 10cm}
.show {display:block;}

如何在鼠标移出时关闭下拉列表，我知道通过使用css我们可以轻松完成。但在这里我没有得到如何添加CSS。以前，我把它用于其他，但在这里该怎么办我没有。

你能帮帮我吗？

Answer 1

您可以使用纯css ：

.dropbtn:hover ~ #nav .dropdown-content {
    display: block;
}

.dropbtn1:hover ~ #nav1 .dropdown-content1 {
    display: block;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost/performance/css/header.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{        
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 6px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 50px;
        display: inline-block;
        text-decoration:none
    }
.dropbtn1 {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
    background-color: ;
}

.fixed-header {
    position: relative;
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color:#CCC;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm
    display:none;
}

.dropdown-content1 a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4cm
}

.fixed-header a:hover {background-color: #f1f1f1}
.container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }

#nav1{margin-left: 5cm}

.dropbtn {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: ;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color:#CCC;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm;
    display:none;
}

.dropdown-content a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4cm
}

#nav{margin-left: 10cm}
.show {display:block;}

.dropbtn:hover ~ #nav .dropdown-content {
	display: block;
}

.dropbtn1:hover ~ #nav1 .dropdown-content1 {
	display: block;
}

＆＃13;

<?php
include_once 'Connection.php';
session_start();
echo '<body>
    <div class="fixed-header">
        <div ="main-div">
            <nav>    
                <a href="http://localhost/Performance/Project_form.php" target=>Create Project</a>
                <button href=""  class="dropbtn1">Project</button>
                <a href="http://localhost/performance/Create_test.php">Create Test</a>
                <button href=""  class="dropbtn">Test</button>

                    <div id="nav">
                      <div id="myDropdown" class="dropdown-content">';
                            $selected_val=null;
                            $test_name=null;
                            function loadtest_name(){
                                $test=array();
                                $sql="select loadtest from create_load_test;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['loadtest'];
                                }
                                return $test;
                            }
                            //Get file name
                            function load_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(loadtest) from create_load_test;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(loadtest)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=loadtest_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=load_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

                    <div id="nav1">
                      <div id="myDropdown1" class="dropdown-content1">';
                            $selected_val=null;
                            $test_name=null;
                            function project_name(){
                                $test=array();
                                $sql="select project_name from project;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['project_name'];
                                }
                                return $test;
                            }
                            //Get file name
                            function project_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(project_name) from project;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(project_name)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=project_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=project_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname1"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

             </nav>          
        </div>
    </div>  
    <div class="fixed-footer">
        <div class="container">Merahkee Tech Souluctions,Hubli</div>        
    </div>';
?>

＆＃13;

使用jquery：

$(document).ready(function(){
    $('.dropbtn').click(function(){
        $('.dropdown-content1').hide();
        $('.dropdown-content').toggle();
    })

    $('.dropbtn1').click(function(){
        $('.dropdown-content').hide();
        $('.dropdown-content1').toggle();
    })
})

＆＃13;

$(document).ready(function(){
	$('.dropbtn').click(function(){
		$('.dropdown-content1').hide();
		$('.dropdown-content').toggle();
	})

	$('.dropbtn1').click(function(){
		$('.dropdown-content').hide();
		$('.dropdown-content1').toggle();
	})
})

＆＃13;

body{        
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 6px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 50px;
        display: inline-block;
        text-decoration:none
    }
.dropbtn1 {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
    background-color: ;
}

.fixed-header {
    position: relative;
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color:yellow ;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm;
    display:none;
}

.dropdown-content1 a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4 cm
}

.fixed-header a:hover {background-color: #f1f1f1}
.container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }

#nav1{margin-left: 5cm}

.dropbtn {
    background-color:black ;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: ;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color:red;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 4cm;
    display:none;
}

.dropdown-content a {
    color: black;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    margin-left: 4cm
}

#nav{margin-left: 10cm}
.show {display:block;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost/performance/css/header.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
include_once 'Connection.php';
session_start();
echo '<body>
    <div class="fixed-header">
        <div ="main-div">
            <nav>    
                <a href="http://localhost/Performance/Project_form.php" target=>Create Project</a>
                <button href="" class="dropbtn1">Project</button>
                <a href="http://localhost/performance/Create_test.php">Create Test</a>
                <button href="" class="dropbtn">Test</button>

                    <div id="nav">
                      <div id="myDropdown" class="dropdown-content">';
                            $selected_val=null;
                            $test_name=null;
                            function loadtest_name(){
                                $test=array();
                                $sql="select loadtest from create_load_test;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['loadtest'];
                                }
                                return $test;
                            }
                            //Get file name
                            function load_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(loadtest) from create_load_test;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(loadtest)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=loadtest_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=load_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

                    <div id="nav1">
                      <div id="myDropdown1" class="dropdown-content1">';
                            $selected_val=null;
                            $test_name=null;
                            function project_name(){
                                $test=array();
                                $sql="select project_name from project;";
                                $query=mysqli_query($GLOBALS['db'],$sql);
                                while ($row = mysqli_fetch_array($query))  {
                                    $test[]=$row['project_name'];
                                }
                                return $test;
                            }
                            //Get file name
                            function project_file_name(){
                                $file=array();
                                $sql1="select file_name from type_of_performance_test;";
                                $query1=mysqli_query($GLOBALS['db'],$sql1);
                                while ($row = mysqli_fetch_array($query1))  {
                                    $file[]=$row['file_name'];
                                }
                                return $file;
                            }
                                //Get count of number of test_types
                                $sql_count="select count(project_name) from project;";
                                $query_count=mysqli_query($GLOBALS['db'],$sql_count);
                                $row=mysqli_fetch_array($query_count);
                                $testcount=$row['count(project_name)'];

                            for($i=0;$i<$testcount;$i++){
                                //calling test_name() method and storing those values in a string
                                $test=project_name();
                                $test_name=$test[$i];
                               //calling file_name() method and storing those values in a string
                                $file=project_file_name();
                                $file_name=$file[$i];

                                echo' <a type="submit" name="testname1"  href='.$file_name.'>'.$test_name.'</a><br>';

                            }
                        echo '</div>
                      </div>

             </nav>          
        </div>
    </div>  
    <div class="fixed-footer">
        <div class="container">Merahkee Tech Souluctions,Hubli</div>        
    </div>';
?>

＆＃13;

Answer 2

以下是HTML和CSS的示例。看看小提琴

＆＃13;

    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 100%; 
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>

</head>
<body>
    <ul>
        <li><a href="#">TAB 1</a></li>
        <li><a href="#">TAB 2</a></li>
        <li>
            <a href="#">TAB 3 &#9662;</a>
            <ul class="dropdown">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">TAB 4</a></li>
    </ul>
    <p>Test</p>
</body>
</html>

＆＃13;

关闭mouseout下拉列表

2 个答案: