CSS如何使用此下拉功能使图像可点击？

我想要做的是一个设置图标，你可以点击它然后创建一个选项下拉菜单。CSS如何使用此下拉功能使图像可点击？

这是我到目前为止的代码：

// Get the button, and when the user clicks on it, execute myFunction 
 
document.getElementById("myBtn").onclick = function() {myFunction()}; 
 

 
/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */ 
 
function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown if the user clicks outside of it 
 
window.onclick = 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'); 
 
      } 
 
     } 
 
    } 
 
}

.dropbtn { 
 
      background-image: url("icons/settings-icon.png"); 
 
      background: #aeaba9; 
 
      color: white; 
 
      padding: 10px; 
 
      font-size: 10px; 
 
      border: none; 
 
      cursor: pointer; 
 
     } 
 

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

 
     .dropdown { 
 
      position: relative; 
 
      display: inline-block; 
 
     } 
 

 
     .dropdown-content { 
 
      display: none; 
 
      position: absolute; 
 
      background-color: #f9f9f9; 
 
      min-width: 160px; 
 
      overflow: auto; 
 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
     } 
 

 
     .dropdown-content a { 
 
      color: black; 
 
      padding: 12px 16px; 
 
      text-decoration: none; 
 
      display: block; 
 
     } 
 

 
     .dropdown-content a:hover {background-color: #f1f1f1} 
 

 
     .show {display:block;}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<title>Clickable Dropdown</title> 
 
<body> 
 

 
<h2>Clickable Dropdown</h2> 
 
<p>Click on the button to open the dropdown menu.</p> 
 

 
<div class="dropdown"> 
 
    <button id="myBtn" class="dropbtn"></button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
     <a href="#home">Home</a> 
 
     <a href="#about">About</a> 
 
     <a href="#contact">Contact</a> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

我尝试添加的CSS线

背景图像：网址（“图标/设置图标。 PNG“）;

但这并没有做任何事情或抛出一个错误。所以我不确定我做错了什么，或者如何去做这件事。

来源

2016-02-25 ellenmight

你有没有试过只给图像添加id，所以''替代'button' –

Simon，这很有效，非常感谢你！ – ellenmight

确定将添加为答案:-) –

我注意到你把它写：

background-image: url("icons/settings-icon.png"); 
background: #aeaba9;

第二行覆盖的第一行。您可能要重新排序，或使第二行读取更具体background-color: #aeaba9;

来源

2016-02-25 22:23:52 Quantastical

您是否尝试过只是ID添加到图像，以便

<div class="dropdown"> 
    <img src="icons/settings-icon.png" id="myBtn" /> 
    <div id="myDropdown" class="dropdown-content"> 
    <a href="#home">Home</a> 
    <a href="#about">About</a> 
    <a href="#contact">Contact</a> 
</div>

在更换按钮

来源

2016-02-26 22:35:06

CSS如何使用此下拉功能使图像可点击？

回答

相关问题