Why in css I using cursor: pointer and background-color: red; but can not display it?

user_16232251 0
Viewed 221

I am newbie with html css and meet this problem. I wrote a very simple html css program and here is my code.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: Arial, Helvetica, sans-serif;
}

.clear {
  clear: both;
}

.text-white {
  color: #fff !important;
}

.row {
  margin-left: -8px;
  margin-right: -8px;
}


/*the gia*/

.row::after {
  content: "";
  display: block;
  clear: both;
}

#main {}

#header {
  height: 46px;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#nav {
  display: inline-block;
}

#nav>li {
  display: inline-block;
}

#nav li {
  position: relative;
}

#nav>li>a {
  color: #fff;
  text-transform: uppercase;
}

#nav li a {
  text-decoration: none;
  line-height: 46px;
  padding: 0 24px;
  display: block;
}

#nav .subnav li:hover a,
#nav>li:hover>a {
  color: #000;
  background-color: #ccc;
}

#nav,
.subnav {
  list-style-type: none;
}

#nav li:hover .subnav {
  display: block;
}

#nav .subnav {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  top: 100%;
  left: 0;
}

#nav .subnav a {
  color: #000;
  padding: 0 16px;
}

#nav .nav-arrow-down {
  font-size: 16px;
}

#header .search-btn {
  float: right;
  padding: 12px 24px;
}

#header .search-icon {
  color: #fff;
  font-size: 16px;
}

#header .search-btn:hover {
  background-color: #f44336;
  cursor: pointer;
}


/* mobile nav */

.nav_bars-btn {
  width: 28px;
  height: 28px;
  color: #fff;
  margin-left: 8px;
  margin-top: 4px;
  display: inline-block;
  display: none;
}

.nav__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-color: rgba(0, 0, 0, 0.5);*/
}

@media (max-width: 1023px) {
  .nav_bars-btn {
    display: inline-block;
  }
  {
    display: none;
  }
}
<div id="main">
  <!-- header -->
  <div id="header">
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#band">Bane</a></li>
      <li><a href="#tour">Tour</a></li>
      <li><a href="#contact">Contact</a></li>
      <li>
        <a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>    
</a>
        <ul class="subnav">
          <li><a href="#">Merchandise</a></li>
          <li><a href="#">Extras</a></li>
          <li><a href="#">Media</a></li>
        </ul>
      </li>
    </ul>
    <div class="nav_bars-btn">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
    </div>
    <div class="nav__overlay"></div>
    <div class="search-btn">
      <i class="search-icon ti-search"></i>
    </div>
  </div>
</div>

I have 2 problems. The 1st is, as you can see in my code, I coded for when I click to the button More, it will show the subnav "Merchandise", "Extras", "Media", but when I ran the code, when I click to the button More, nothing happen.

The second problem is, I want when I hover over the magnifying glass, it will change to the red background. And cursor will change to the pointer. So as you can see in the code, I wrote like this

#header .search-btn:hover {
  background-color: #f44336;
  cursor: pointer;
}

But nothing happen.

Could you please help me to solve those problem ? Thank you very much for your time.

css html
2 Answers

acctualy one element is overlapping your btn.

just remove or coment the code in css class

"" .nav__overlay "" /* position: fixed;*/

or add this below code

#header .search-btn {
position: absolute;
top: 0;
right: 12px;}

then it will work and i add font awesome because your icon is not showing.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: Arial, Helvetica, sans-serif;
}

.clear {
  clear: both;
}

.text-white {
  color: #fff !important;
}

.row {
  margin-left: -8px;
  margin-right: -8px;
}


/*the gia*/

.row::after {
  content: "";
  display: block;
  clear: both;
}

#main {}

#header {
  height: 46px;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#nav {
  display: inline-block;
}

#nav>li {
  display: inline-block;
}

#nav li {
  position: relative;
}

#nav>li>a {
  color: #fff;
  text-transform: uppercase;
}

#nav li a {
  text-decoration: none;
  line-height: 46px;
  padding: 0 24px;
  display: block;
}

#nav .subnav li:hover a,
#nav>li:hover>a {
  color: #000;
  background-color: #ccc;
}

#nav,
.subnav {
  list-style-type: none;
}

#nav li:hover .subnav {
  display: block;
}

#nav .subnav {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  top: 100%;
  left: 0;
}

#nav .subnav a {
  color: #000;
  padding: 0 16px;
}

#nav .nav-arrow-down {
  font-size: 16px;
}

#header .search-btn {
  float: right;
  padding: 12px 24px;
 position: absolute;
top: 0;
right: 12px;
}

#header .search-icon {
  color: #0fade9;
  font-size: 16px;
}

#header .search-btn:hover {
  background-color: #f44336;
  cursor: pointer;
}


/* mobile nav */

.nav_bars-btn {
  width: 28px;
  height: 28px;
  color: #fff;
  margin-left: 8px;
  margin-top: 4px;
  display: inline-block;
  display: none;
}

.nav__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:-1;
  /*background-color: rgba(0, 0, 0, 0.5);*/
}

@media (max-width: 1023px) {
  .nav_bars-btn {
    display: inline-block;
  }
  {
    display: none;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="main">
  <!-- header -->
  <div id="header">
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#band">Bane</a></li>
      <li><a href="#tour">Tour</a></li>
      <li><a href="#contact">Contact</a></li>
      <li>
        <a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>    
</a>
        <ul class="subnav">
          <li><a href="#">Merchandise</a></li>
          <li><a href="#">Extras</a></li>
          <li><a href="#">Media</a></li>
        </ul>
      </li>
    </ul>
    <div class="nav_bars-btn">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
    </div>
    <div class="nav__overlay"></div>
    <div class="search-btn">
      <i class="search-icon ti-search fa fa-search"></i>
    </div>
  </div>
</div>

user_175859340

It might be a system or browser bug. Here's a Jquery alternative if the pure css does not work in your system (if you are fine with using it).

.buttons {
  display: flex
}

.btn {
  position: relative;
  display: inline;
  width: 80px;
  height: 30px;
  background-color: #15181c;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  letter-spacing: 1.5px;
  transition-duration: 0.3s;
  padding: 5px 10px;
}
.disabled {
  opacity: 0.5;
}
.btn:hover, .btn.jqHover {
 background-color: lightslategray;
  cursor: pointer;
  border: 1px solid red
 }
 .activeElement {
   background:#bfbfbf;
 }

<div class="buttons">
  <div class='btn-container'>
    <div class="btn">DEAL</div>
  </div>
  <div class='btn-container'>
    <div class="btn disabled">HIT</div>
  </div>
  <div class='btn-container'>
    <div class="btn disabled">STAND</div>
  </div>
</div>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 
<script>
$(document).ready(function () {

            var hoveredElement;
            var clickedElement;
            $(document).mousemove(function (event) {
                hoveredElement=event.target.nodeName;
                // comment this section in between to see issue
                $(hoveredElement).mouseenter(function () {
                    $(this).addClass('jqHover');
                }).mouseleave(function () {
                    $(this).removeClass('jqHover');
                });            
                return hoveredElement;
            });
            $(document).click(function (event) {
                clickedElement = event.target.nodeName;
                
                return clickedElement;
            });
});
</script>
user_175781810
Related