Help hover stop after 1 click on 1 of the tabs

HTML & CSS
1 
<!DOCTYPE html>

<html>

<head>
	<title>Guide Collection</title>
	<p>Guide Collection</p>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="games">
		<div class="tabs">
			<button id="dst" onclick="openDST()">DST</button>
			<button id="ds" onclick="openDS()">DS</button>
			<button id="oni" onclick="openONI()">ONI</button>
			<button id="cc" onclick="openCC()">Cookie Clicker</button>
			<button id="ba" onclick="openBA()">Big Ambitions</button>
		</div>
		<div class="contanier">
			<div id="contect1" class="contect">
				<div id="sqaure">
					<h1>Find Base Location</h1>
				</div>
				<div id="sqaure">
					<h1>Find Base Location</h1>
				</div>
				<div id="sqaure">
					<h1>Find Base Location</h1>
				</div>
				<div id="sqaure">
					<h1>Find Base Location</h1>
				</div>
				<div id="sqaure">
					<h1>Find Base Location</h1>
				</div>
			</div>
			<div id="contect2" class="contect">
				<div id="sqaure">
					<h1>Sun Cool Emote</h1>
				</div>
				<div id="sqaure">
					<h1>Sun Cool Emote</h1>
				</div>
				<div id="sqaure">
					<h1>Sun Cool Emote</h1>
				</div>
				<div id="sqaure">
					<h1>Sun Cool Emote</h1>
				</div>
				<div id="sqaure">
					<h1>Sun Cool Emote</h1>
				</div>
			</div>
			<div id="contect3" class="contect">
				<div id="sqaure">
					<h1>Klei Blei Glei</h1>
				</div>
				<div id="sqaure">
					<h1>Klei Blei Glei</h1>
				</div>
				<div id="sqaure">
					<h1>Klei Blei Glei</h1>
				</div>
				<div id="sqaure">
					<h1>Klei Blei Glei</h1>
				</div>
				<div id="sqaure">
					<h1>Klei Blei Glei</h1>
				</div>
			</div>
			<div id="contect4" class="contect">
				<div id="sqaure">
					<h1>Very Golden Cookie</h1>
				</div>
				<div id="sqaure">
					<h1>Very Golden Cookie</h1>
				</div>
				<div id="sqaure">
					<h1>Very Golden Cookie</h1>
				</div>
				<div id="sqaure">
					<h1>Very Golden Cookie</h1>
				</div>
				<div id="sqaure">
					<h1>Very Golden Cookie</h1>
				</div>
			</div>
			<div id="contect5" class="contect">
				<div id="sqaure">
					<h1>Very Large Buinsess</h1>
				</div>
				<div id="sqaure">
					<h1>Very Large Buinsess</h1>
				</div>
				<div id="sqaure">
					<h1>Very Large Buinsess</h1>
				</div>
				<div id="sqaure">
					<h1>Very Large Buinsess</h1>
				</div>
				<div id="sqaure">
					<h1>Very Large Buinsess</h1>
				</div>
			</div>
		</div>

			
		</div>
	</div>

	<script>
		var contect1 = document.getElementById("contect1");
		var contect2 = document.getElementById("contect2");
		var contect3 = document.getElementById("contect3");
		var contect4 = document.getElementById("contect4");
		var contect5 = document.getElementById("contect5");

		var dst = document.getElementById("dst");
		var ds = document.getElementById("ds");
		var oni = document.getElementById("oni");
		var cc = document.getElementById("cc");
		var ba = document.getElementById("ba");



		function openDST(){
			contect1.style.display = "grid";
			contect2.style.display = "none";
			contect3.style.display = "none";
			contect4.style.display = "none";
			contect5.style.display = "none";
			dst.style.color = "#2eb05b";
			ds.style.color = "#000";
			oni.style.color = "#000";
			cc.style.color = "#000";
			ba.style.color = "#000";
		}

		function openDS(){
			contect1.style.display = "none";
			contect2.style.display = "grid";
			contect3.style.display = "none";
			contect4.style.display = "none";
			contect5.style.display = "none";
			dst.style.color = "#000";
			ds.style.color = "#2eb05b";
			oni.style.color = "#000";
			cc.style.color = "#000";
			ba.style.color = "#000";
		}

		function openONI(){
			contect1.style.display = "none";
			contect2.style.display = "none";
			contect3.style.display = "grid";
			contect4.style.display = "none";
			contect5.style.display = "none";
			dst.style.color = "#000";
			ds.style.color = "#000";
			oni.style.color = "#2eb05b";
			cc.style.color = "#000";
			ba.style.color = "#000";
		}

		function openCC(){
			contect1.style.display = "none";
			contect2.style.display = "none";
			contect3.style.display = "none";
			contect4.style.display = "grid";
			contect5.style.display = "none";
			dst.style.color = "#000";
			ds.style.color = "#000";
			oni.style.color = "#000";
			cc.style.color = "#2eb05b";
			ba.style.color = "#000";
		}

		function openBA(){
			contect1.style.display = "none";
			contect2.style.display = "none";
			contect3.style.display = "none";
			contect4.style.display = "none";
			contect5.style.display = "grid";
			dst.style.color = "#000";
			ds.style.color = "#000";
			oni.style.color = "#000";
			cc.style.color = "#000";
			ba.style.color = "#2eb05b";
		}


         
	</script>
</body>

</html>

css:


 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

html:
*{
	font-family: "Roboto";
	margin: 0px;
	padding-bottom: 10px;
}

p {
  font-size: 70px;
  padding-left: 10px;
  text-shadow: -2px 5px 15px #C2C2C2;
   

}

.games{
	width: 100%;
	height: 1800px;
	position: relative;
	overflow: hidden;

}

.tabs {
	display: flex;
	border-bottom: 1px solid #ccc;
	
}

.tabs button{
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	font-size: 25px;
	font-weight: bold;
	padding: 8px 12px;
	text-shadow: -2px 5px 15px #C2C2C2;
	transition: 0.2s;

}

.tabs button:hover {
	color: #2eb05b;
}

.tabs button:active {
	color:#00571e;
}

#sqaure {
	width: 350px;
  	height: 450px;
  	border-radius: 7%;
  	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  	align-content: center;

}

h1 {
	text-align: center;
	padding-top: 20px;
	text-shadow: 4px 3px 14px rgba(0,0,0,0.35);
}


.contect {
  	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  	display: none;
  	align-items: center;
  	width: 100%;
  	padding-top: 30px;
  	margin-left: 6px;
  	padding-left: 10px;
  	padding-right: 10px;
  	
  	

}

#contect1 {
	display: grid;
}

#dst{
	color: #2eb05b;
}

.tabs button:focus {
  outline: none;
}
2

Hi,

You are setting the color of the tabs with an inline style from the jS which means that your hover style is over-ridden. It is impossible to over-ride an inline style unless you use !important (which is why you should avoid setting inline styles and instead add classes with your js instead and handle the appearance from the css because that’s it’s job).

For your hover to work with your current code you would need to do this.

.tabs button:hover {
  color: #2eb05b!important;
}

Note that your js is very verbose and could be shortened by about 80% but would be a question for the js forum if you want to explore that :slight_smile:

Also note that IDs are unique and you can only use the same id more than once (see your #sqaure id). They should be classes instead.

1 Like
3

Thank You very very much

1 Like
4

You’re welcome.

If I may make a few css suggestions before you get in too deep with this as there are some areas that will cause you problems.

   *{
      font-family: "Roboto";
      margin: 0px;
      padding-bottom: 10px;
    }

The 10px padding bottom on everything is going to be a nightmare to maintain. I rarely use the universal selector for setting blanket styles like that as its a broad brush that will catch you out more often than not. I would also not use it for setting the base font-family as that will kill inheritance if you use a different font on another container. Instead just apply the font-family to the html or body elements instead and the page will inherit. There are a couple of exceptions for form element font families but you can over-ride them more specifically.

Margin and padding are best catered with a short reset stylesheet or indeed just address them on the elements you use.

.games{
	width: 100%;
	height: 1800px;
	position: relative;
	overflow: hidden;
}

You will rarely give a fixed height to containers that hold fluid content like text as you never know how tall they will be and indeed if a use has zoomed the text only they may have lost all their content due to the overflow:hidden. Ue a min-height if you need an initial height but 1800px looks like a magic number and there are better alternatives such as letting content dictate the height or setting an initial viewport min-height instead.

#sqaure {
	width: 350px;
  	height: 450px;
  	border-radius: 7%;
  	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  	align-content: center;

}

Same issue here as you can never be sure that 450px is going to be enough if someone resizes their text or you add more content. Use min-height instead.

Also as you set a width of 350px you are losing the fluid nature of the grid and that means you will need to set up alternative rules for screens that are not 5 x 350px wide. Try and use more fluid approaches and think about what will happen at various screens widths.

.contect {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      display: none;
      align-items: center;
      width: 100%;
      padding-top: 30px;
      margin-left: 6px;
      padding-left: 10px;
      padding-right: 10px;
    }

A number of problems here"

a) 100%(width) + 6px(margin) + 10px(padding) + 10px(pdding) = too big for any container and will overflow.

Remove the width:100% as it’s not needed for block elements like this and it will default to auto which will be full width but include the padding and the margin without overflowing. (You could have used the border-box-model but the margin would still have broken the layout by 6px.)

However, you would most likely have been better off using the gap property instead (gap:10px) to give you the spacing you wanted.

b)

align-items: center;

You probably don’t want that as it will stop the columns being equal height once their height is dictated by content.

.tabs button:focus {
  outline: none;
}

You just stopped me from using the tabs because I use the keyboard and not a mouse. I have no way of knowing where I am on the page. Imagine trying to use your mouse but the mouse pointer is missing from the screen! :slight_smile: That’s exactly what happens to keyboard users when you remove:focus.

Almost Never remove :focus but instead style it with some other visual clue if you don’t like the outline. (That is until :focus-visible is properly implemented)

Hopefully those few pointers will keep you on the straight and narrow before you get too far down the road:)

I see you have some good answers on your JS question now so you are good to go :wink:

1 Like
5

First Thank You very much.
Second, if I remove all the paddings in contect that will be no gap for the top no gap from the left and a big gap from right

6

Here’s a quick example just to give you some ideas.:slight_smile:


(Click the “Edit on Codepen” link to open in a full page.)

It’s not meant to be perfect but something to show what can be done and how to approach some things. I realise your design may be heading in a different direction but you should be able to work through it. I also incorporated the js from the other thread for you :slight_smile:

1 Like
7

As I mentioned above you can just remove the width:100% and then the padding will not be an issue.:slight_smile:

However, it’s probably best to make the space between columns using the gap:property as in my example.

1 Like
8

9 posts were merged into an existing topic: Rainbow border animation

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.