Just add the pointer-events: none css property to the i tag element:
.fa {
pointer-events: none;
}
to prevent any pointer events for the <i> tag
Live Demo: CodePen
Solution 1 :
Problem :
I added a dropdown button with a down arrow (image) with the help of https://www.w3schools.com/howto/howto_js_dropdown.asp. However, after adding the down arrow image, the image area of the button cannot be clicked? Not quite sure what went wrong here, the button is still functional.
HTML:
<html>
<head>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}</script>
</head>
<body>
<!-- dropdown feature -->
<div class="dropdown">
<button onclick="dropdownMenu()" class="dropbtn">User
<!--image cant be clicked???-->
<img src="images.png" style="height:8px; width:10px; margin-bottom: 2px; margin-left: 5px;">
</button>
<!-- dropdown content -->
<div id="myDropdown" class="dropdown-content">
<a href="profile.html">Profile</a>
<a href="settings.html">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</body>
</html>
CSS:
.dropbtn {
background-color: white;
color: black;
padding: 10px;
font-size: 14px;
border: none;
cursor: pointer;
position: absolute;
top: -69.5px;
left: 1280px;
border-radius: 4px;
width: 90px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: rgb(218, 218, 218);
}
.dropdown {
position: absolute;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: -20px;
left: 1210px;
background-color: #f1f1f1;
min-width: 164px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 6px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
Can someone please help identify what is the error here? Thanks a lot!
Comments
Comment posted by codepen.io/oze4/pen/povxBgY
Everything looks right to me.. I even tested it and it works just fine for me..