Active and Hover come together

Question

Active and Hover come together

Navigation

#1 by (1 votes)

0

I'm making a website. When a page is active, the button on that page turns dark blue. I have entered a dropdown-button and it is giving me a lot of problems. When the Multimedia button (dropdown-button) is active, the hover does not stop, which does not happen with the other buttons. Here's the example: link

Here's the CSS and HTML:

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;
}
button:hover {
	  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;
}
.dropbtn_active {
    color: white;
	background: #309ba5 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;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn_active">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_active')) {
    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 в 12:28

source

1 answer

modal bootstrap dialog with data from a php query Read table .dbf from PHP

score 1 · Accepted Answer

Maybe it's because you have conflicts in the CSS:

You have this:

button:hover {
    background-color: #4dd6e2;
    color: white;
}

And this:

.dropbtn_active {
    color: white;
    background: #309ba5 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;
    ...}

In the same label you put different colors to the same thing and you are giving styles by different elements and by class.

You should clean the code of everything that is not needed and eliminate conflicts to avoid unexpected results.

EDITO

A quick way to do it would be:

.dropbtn_active {
  background: #309ba5 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;
  ...}

.dropbtn_active:hover {
  background-color: #4dd6e2;
  color: white;
}