Hover does not work on button

Question

Hover does not work on button

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I'm making a web page. I have entered a dropdown-button , but it gives me problems. In the menu, if you put the mouse over a button, it becomes light blue, but in the Multimedia button ( dropdown-button ), the hover does not work.

How can I solve it?

Here the problem live: link

Here the CSS and the HTML:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15.6%;
    background-color: #e0e0e0;
    position: fixed;
    height: 600px;
    overflow: auto;
	right:1129px;
	top:47px;
	border:1px solid #939496;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
	font-size:30px;
	
}





li a.active {
    background-color: #309ba5;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4dd6e2;
    color: white;
}
.dropbtn {
    background: #e0e0e0 url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png') no-repeat 0;
    background-size: 25px 25px;
    color: black;
    padding: 16px 25px;
    font-size: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: Times New Roman;
	position:fixed;
	left: 9px;
	top:148px;
	width: 210px;
	height: 55px;
}

.active {    
  background-color: #309ba5;
  color: white;
}

.dropdown {
  width: 190px;
}

.dropdown-content {
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	
	position: fixed;
	top: 170px;
	left: 220px;
	background-color: #ededed;
}

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

.dropdown a:hover {background-color: #e2e2e2}

.show {display:block;}

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="aboutme"><a href="aboutme.html">About</a></li>
</ul>



<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Multimedia</button>
  
  <div id="myDropdown" class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
  
</div>


<script>
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

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');
      }
    }
  }
}
</script>

html css

asked by JuanVan12 10.11.2016 в 11:48

source

2 answers

1

You are only defining classes for the elements that are within li and a. However, you are also using a button element, that is why it does not 'work', and it is not that it does not work, just as you are not defining it, you do not notice the 'hover effect'.

In this case, the ideal would be to do a DRY [Do not Repeat Yourself], since they are classes that will repeat the same properties and values.

What I can think of is that the element ul we add an ID called #menu and then add the following class:

#menu a:hover:not(.active),
#menu button:hover:not(.active){
  background-color:#4dd6e2;
  color:white;
}

With this class it would have to work, if we had not applied the DRY, we would have to put the following classes

li a:hover:not(.active) {
    background-color: #4dd6e2;
    color: white;
}

.dropdown button:hover:not(.active){
  background-color:#4dd6e2;
  color:white;
}

#myDropdown a:hover:not(.active){
  background-color:#4dd6e2;
  color:white;
}

As we can see, the difference is abysmal and it shows that we are repeating the same properties and values.

Greetings!

answered by 10.11.2016 в 16:47

How to pass the entered data of a structure to upper case Doubt about pointer to structure in TCP / IP connections

score 3 · Accepted Answer

3

The hover is defined only for the elements li and a , but the button that fails you is a button . Add the hover you want to the style of the button.

answered by 10.11.2016 / 11:53

source