How to change the color of the div without affecting :Hover

Question

How to change the color of the div without affecting :Hover

Asked 5 years ago

Viewed 110 times

2

I am trying to change the color of my header as soon as it passes 400px but when doing so my :Hover no longer works in the div after sliding down the bar

$(window).scroll(function() {
  if ($(document).scrollTop() < 400) { 
    $('.color').css({
      'background-color': 'black' 
    });    
    $('.sub-menu a').css({      
      'color': 'white',      
    });        

  } else {
    $('.color').css({
      'background-color': 'white'
    });    
    $('.sub-menu a').css({
      'color': 'black'
    });          
  }
});

html,
body {    
    width: 100%;
    height: 200%;
    overflow-x: hidden;
}

header {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    height: 60px;
}
.color {
    background-color: black;   
    transition: 0.6s;    
}
.sub-menu {
    height: 60px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    float: left;
}
.sub-menu ul{
    margin-top: 20px;
}
.sub-menu ul li {
    display: inline-block;
    list-style: none;
}
.aqui {
    height: fit-content;
    text-align: center;
    background-color: red;
    z-index: 0;
    position: absolute;
    top: 400px;
    width: 100%;
}
.sub-menu a {
    font-size: 17px;    
    text-transform: uppercase;
    color: white;
    padding-right: 30px;
    text-decoration: none;
    transition: 0.6s;
}

.sub-menu a:hover {
    color: orangered;
    transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="pt">

<head>
    <title>Teste</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./main.css">
</head>

<body>    
    <header class="color" >
        <div class="logo-radical"></div>
        <div class="sub-menu">
            <ul>
                <il>
                    <a >Home</a>
                </il>
                <il>
                    <a >Programacões</a>
                </il>
                <il>
                    <a >Times</a>
                </il>
                <il>
                    <a >Contato</a>
                </il>
            </ul>
        </div>               
    </header>
    <div class="aqui" id="aqui">
        <span>Aqui !</span>
            
    </div> 
    <script type="text/javascript" src="./main.js"></script>
</body>

</html>

2 answers

3

I saw two problems in your code. The first is in jQuery where you are putting CSS styles directly in the tag using the method .css() when vc puts the style straight into the tag you can’t easily override it by the styles that are in your CSS class, like .classe {color: black} will not overwrite <div class="classe" style="color: red"> She will continue red and not black.

Another detail is the logic you used in jQuery and CSS, you are putting a lot of force in the class, you can read about it in this article by Maujor https://www.maujor.com/tutorial/specificity_wars.php so to make the class "catch" you have to have a higher force in the class, like .color .sub-menu ul li a:hover is stronger than .color .sub-menu a:hover.

And in jQuery to facilitate I suggest you create a activation class, is a class you will put in div pai, so that if the father has that class the children will behave one way, and if the father does not have that class the children will behave another way... In your case, father’s normal class is .color and with the activation .color.roll, being that the class .roll is the activation class added by jQuery on scroll

See the image code above.

$(window).scroll(function () {
	if ($(document).scrollTop() > 400) {
		$(".color").addClass("roll");
	} else {
		$(".color").removeClass("roll");
	}
});

html,
body {
	width: 100%;
	height: 200%;
	overflow-x: hidden;
}

header {
	display: block;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	height: 60px;
}

.color {
	background-color: black;
	transition: 0.6s;
}

.sub-menu {
	height: 60px;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	float: left;
}

.sub-menu ul {
	margin-top: 20px;
}

.sub-menu ul li {
	display: inline-block;
	list-style: none;
}

.aqui {
	height: fit-content;
	text-align: center;
	background-color: red;
	z-index: 0;
	position: absolute;
	top: 400px;
	width: 100%;
}

.sub-menu a {
	font-size: 17px;
	text-transform: uppercase;
	color: white;
	padding-right: 30px;
	text-decoration: none;
	transition: 0.6s;
}

.color .sub-menu ul li a:hover {
	color: orangered;
	transition: 0.5s;
}

.color.roll {
	background-color: white;
}

.color.roll .sub-menu a {
	color: black;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<header class="color">
  <div class="logo-radical"></div>
  <div class="sub-menu">
    <ul>
      <li>
        <a>Home</a>
      </li>
      <li>
        <a>Programacões</a>
      </li>
      <li>
        <a>Times</a>
      </li>
      <li>
        <a>Contato</a>
      </li>
    </ul>
  </div>
</header>

<div class="aqui" id="aqui">
  <span>Aqui !</span>
</div>

1

Great, very well explained. Thank you

– Jordão Qualho

2019/06/18 at 15:59
@Wingeds no problem young, glad you read the explanation, that makes a difference! []s

– hugocsl

2019/06/18 at 16:02

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.

by Marcos Vinicius Leão • **273** points · Answer 1 · 2019-06-18T04:43:05+00:00

Hello friend all right? Try to use ! Mportant in front of the color of the Hover, I tested and it worked. I hope it helps you.

.sub-menu a:hover {
    color: orangered !important;
    transition: 0.5s;
}

Remembering that your tag <li> is written <il>. Try this:

.sub-menu ul > li a:hover {
    color: orangered !important;
    transition: 0.5s;
}