If hover then show else hide by js

JavaScript
1 
<div class="wrapper1">
  <h2>1</h2><h2>2</h2><h2>3</h2>
</div>

<div class="wrapper2">
  <div class="content1">
    1
  </div>
  <div class="content2">
    2
  </div>
  <div class="content3">
    3
  </div>
</div>

​*{
  padding: 0;
  margin: 0;
}
.wrapper1,.wrapper2{
  width: 100%;
  display: flex;
}
.wrapper1>h2{
  padding: 10px 30px;
  width: 100px;
}
.content1,.content2,.content3{
  width: 150px;
  font-size: 2rem;
  color: #fff;
}
.content1{
  background-color: red;
}
.content2{
  background-color: yellow;
}
.content3{
  background-color: brown;
}

OUTPUT
Screenshot_2018-12-30%20Create%20a%20new%20fiddle%20-%20JSFiddle

I want a function in such a way that when i hover on 1 then only red block will appear, if i hover on 2 then only yellow block will appear and so on.
Remember both wrapper are separated… see code

2

If you’re able to restructure your HTML, you can do something like this:

<div class="wrapper1">
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  	<div class="wrapper2">
  		<div id="box1" class="content">
    		1
  		</div>
  		<div id="box2" class="content">
    		2
  		</div>
  		<div id="box3" class="content">
   			3
  		</div>
	</div>
</div>

<style>
    .content {
    	opacity: 0;
    }
	.wrapper1 h2:nth-of-type(1):hover ~ .wrapper2 .content:nth-of-type(1) {
		opacity: 1;
	}
    .wrapper1 h2:nth-of-type(2):hover ~ .wrapper2 .content:nth-of-type(2) {
		opacity: 1;
	}
    .wrapper1 h2:nth-of-type(3):hover ~ .wrapper2 .content:nth-of-type(3) {
		opacity: 1;
	}
</style>

Also, don’t use class to point to a specific element (in your ex: content1, content2,…), instead you should use id.

3

thank you, but I cannot restructure my HTML. better if suggest some other trick by css or js

4

Are you able to use Jquery?

<style>
.content1,.content2,.content3 {
  opacity: 0;
}

.active {
  opacity: 1;
}
</style>

<script>
    const $HEADER2 = $(".wrapper1 h2");
    $HEADER2.hover(function() {
    		$(`.content${$HEADER2.index(this)+1}`).addClass("active");
		}, function() {
    		$(`.content${$HEADER2.index(this)+1}`).removeClass("active");
	});
</script>
1 Like