CODEWITHSUNDEEP
css
gustavoanalytics
gustavoanalytics

Reputation: 583

When I hover over a div a new div appears ontop of the div causing the overlap to flicker when I move the mouse

Here is a link to my problem http://jsfiddle.net/xb3qkwpp/3/a

When you hover over the green area it starts to flicker when I move the mouse. I am thinking it is z-index but I have set the z-index for the class and ids and it didnt work or maybe I am doing it incorrectly.

html:

<div id="first_area_max" class="first_area">
      <div class="first_area_wrapper">
        <h2>
          FIRST
        </h2>
        <h1>
          foo
        </h1>
        <p class="tk-proxima-nova">
          “I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
        </p>
      </div>
    </div>
    <div id="second_area_max" class="second_area">
      <div class="second_area_wrapper">
        <h2>
          SECOND
        </h2>
        <h1>
          foo
        </h1>
        <p class="tk-proxima-nova">
          “I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
        </p>
      </div>
    </div>
    <div id="third_area_max" class="third_area">
      <div class="third_area_wrapper">
        <h2>
          THIRD
        </h2>
        <h1>
          foo
        </h1>
        <p class="tk-proxima-nova">
          “I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
        </p>
      </div>

css:

html, body {
  margin: 0 auto;
  background-color: black; }

h1, h2, h3 {
  font-weight: normal; }

a {
  text-decoration: none;
  color: inherit; }

ul {
  list-style-type: none;
  padding: 0; }

.no-padding {
  padding: 0; }

.no-margin {
  margin: 0; }

.clear {
  clear: both; }

.first_boss {
    background: blue;
    opacity: 0.7;
}


.second_boss {
    background: red;
    opacity: 0.7;
}

.third_boss {
    background: green;
    opacity: 0.7;
}


.first_page, .second_page, .third_page, .fifth_page {
  background-size: cover;
  background-repeat: no-repeat;
  height: 800px;
  max-width: 1300px; }

.first_page, .second_page, .third_page, .fifth_page {
  min-width: 1000px;
  background-position: center center;
  margin: 0 auto; }


.fifth_page {
  background-image: image-url("fifth_page.jpg");
  z-index: -1;
  z-index: -1; }
  .fifth_page h1 {
    margin-top: 0;
    font-size: 40px; }
  .fifth_page h1, .fifth_page h2 {
    font-family: 'mohaveregular'; }
  .fifth_page p {
    width: 230px;
    line-height: 2em;
    float: right; }

.first_area, .second_area, .third_area {
  color: white;
  padding: 50px;
  width: 500px;
  height: 700px;
  text-align: right;
  position: relative;
  top: 0px;
  float: right;
  background-image: image-url("owner_bg.png"); }
  .first_area p, .second_area p, .third_area p {
    width: 230px;
    line-height: 2em;
    float: right; }

#first_area_max, #second_area_max, #third_area_max {
  margin-right: -850px;
  z-index: 1; }

#first_mouse:hover ~ #first_area_max, #second_mouse:hover ~ #second_area_max, #third_mouse:hover ~ #third_area_max {
  right: 1000px;
  width: 1px;
  z-index: 1;
  display: block;
  overflow: visible; }

.first_boss, .second_boss, .third_boss {
  float: left;
  height: 800px;
  width: 33%;
  z-index: -2; }

.first_area_wrapper, .second_area_wrapper, .third_area_wrapper {
  margin-right: 70px; }

#third_area_max {
  z-index: 1000; }


.text-area {
  padding: 20px;
  background-repeat: no-repeat;
  color: white;
  line-height: 1.4em;
  text-transform: uppercase; }


.clear {
  clear: both; }

Upvotes: 0

Views: 88

Answers (1)

Daniel
Daniel

Reputation: 4946

You need to hover on the div you put on top of it as well. Because of the appearing div you lose focus on the first one, causing your hover state to switch rapidly.

.div1 {
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
}
.div2 {
  display: none;
  position: absolute;
  width: 200px;
  height: 200px;
  background: blue;
}
.div1:hover ~ .div2,
.div2:hover {
  display: block;
}
<div class="div1"></div>
<div class="div2"></div>

Upvotes: 1

Related Questions