Question

以下是我为显示下拉列表而编写的代码。单击时会显示下拉列表项，但我希望在鼠标悬停时显示下拉列表，我希望页面重定向到提供的链接。

<select id="marketplace">
<option>Select a dropdown</option>
<a href="https://www.amazon.in/"><option>Amazon</option></a>
<a href="https://www.flipkart.com/"><option>Flipkart</option></a>
<a href="https://www.snapdeal.com/"><option>Snapdeal</option></a>
<a href="https://paytm.com/"><option>paytm</option></a>
</select>

Answer 1

作为W3Shcools您可以使用而不是像此实现那样的select tag div

/* Dropdown Button */

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
  <button class="dropbtn">Select a dropdown</button>
  <div class="dropdown-content">
    <a href="https://www.amazon.in/">Amazon</a>
    <a href="https://www.flipkart.com/">Flipkart</a>
    <a href="https://www.snapdeal.com/">napdeal</a>
    <a href="https://paytm.com/">paytm</a>
  </div>
</div>

此外，我尝试为您的select标记定义onmouseenter事件，并在javascript中打开此事件的选项。但根据this，这是不可能的。所以你必须改变你的标签！

我尝试的代码：

function f() {
  console.log('here')
  var select = document.getElementById('marketplace');
  select.click();
  
}

<select id="marketplace" onmouseenter="f()">
<option>Select a dropdown</option>
<option><a href="https://www.amazon.in/">Amazon</a></option>
<option><a href="https://www.flipkart.com/">Flipkart</a></option>
<option><a href="https://www.snapdeal.com/">Snapdeal</a></option>
<option><a href="https://paytm.com/">paytm</a></option>
</select>

提示使用option标记作为select标记的直接子标记，并将a标记放在option s

中

Answer 2

您可以使用其他html元素（例如ul和li来实现此目标

＆＃13;

.menu {
  
}
.submenu {
  position: absolute;
  left: 0;
  top: 100%;
  display: none; // initially submenu is hidden
}

.menu li {
  position: relative;
}
.menu li:hover .submenu {
  display: block; // shows submenu on hover
}

＆＃13;

<ul class="menu">
  <li>Select a dropdown
    <ul class="submenu">
      <li><a href="https://www.amazon.in/">Amazon</a></li>
      <li><a href="https://www.flipkart.com/">Flipkart</a></li>
      <li><a href="https://www.snapdeal.com/">Snapdeal</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 3

我是用这个网站制作的 http://www.devcurry.com/2009/04/using-javascript-to-dropdown-html.html

然后我添加功能重定向到链接^^ 检查一下：D

代码演示已在http://www.dotnetcurry.com/Demos/javascript/HoverSelect.htm
结束

＆＃13;

function DropList() {
  var n = document.getElementById("sel").options.length;
  document.getElementById("sel").size = n;
}

function handleSelect(elm){
  window.location = elm.value;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="sel" onmouseover="DropList()" onmouseout="this.size=1;" onchange="javascript:handleSelect(this)">            
    <option value="https://www.amazon.in/">Amazon</option>
    <option value="https://www.flipkart.com/">Flipkart</option>
    <option value="https://www.snapdeal.com/">Snapdeal</option>
    <option value="https://www.paytm.com/">paytm</option>
  </select>
</div>

＆＃13;

Answer 4

您可以使用javascript

来实现此目的

function DropList() {
  var n = document.getElementById("sel").options.length;
  document.getElementById("sel").size = n;
}

function handleSelect(elm){
  window.location = elm.value;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <select id="sel" onmouseover="DropList()" onmouseout="this.size=1;" onchange="javascript:handleSelect(this)"> 
            <option>Select a dropdown</option>
            <option><a href="https://www.amazon.in/">Amazon</a></option>
            <option><a href="https://www.flipkart.com/">Flipkart</a></option> 
            <option><a href="https://www.snapdeal.com/">Snapdeal</a></option> 
        </select>
    </div>

Answer 5

要在HTML中创建相似/重复元素，我更喜欢使用 ul li ，这样可以更轻松地控制它们。

不需要JS或JQUERY，尝试使用更多CSS！

下拉列表

的代码

（你可能会发现CSS方式太长，因为我已经定制了元素以便更多地看到它）

HTML

<div class="navigationWrap"> 
 <ul> 
  <li class="dropdown"><a href="#">Dropdown</a> 
   <ul class="subNav"> 
      <li><a href="#">Dummy One</a></li> 
      <li><a href="#">Dummy Two</a></li> 
      <li><a href="#">Dummy Three</a></li> 
      <li><a href="#">Dummy Four</a></li> 
   </ul> 
  </li> 
 </ul>
</div>

CSS

使用绝对位置＆amp;相对于悬停时的显示元素，我们已经完成了！

ul { margin: 0px; padding: 0px; list-style: none; } 
.navigationWrap ul li { width: 100%; float: left; color: #000; font-size: 30px; position: relative; } 
.navigationWrap ul li a { text-decoration: none; color: #000; display: block; } 
.navigationWrap ul li a:hover { color: #04A000; } 
.navigationWrap ul li ul.subNav { position: absolute; width: 150px; padding:10px; background-color: #fff; border: #000 solid 1px; left: 0; top: 100%; display: none; z-index: 999; } 
.navigationWrap ul li ul.subNav li { float: left; width: 100%; font-size: 20px; letter-spacing: 1px; padding: 0; } 
.navigationWrap ul li ul.subNav a { float: left; width: 100%; transition: all 0.3s ease-in-out; display: block; padding: 0 0 0 15px; } 
.navigationWrap ul li ul.subNav li a:hover { color: #04A000; padding-left: 20px; } 
.navigationWrap ul li ul.subNav li.active a { color: #04A000; } 
.navigationWrap ul li.dropdown:hover ul.subNav { display: block; }

JSFIDDLE - https://jsfiddle.net/neel448/u0Lmb0jv/

在悬停时显示下拉列表

5 个答案: