No estoy seguro de que mi título sea exacto o no. Por algunas razones, necesito aplicar una identificación diferente para la clase, porque solo detecta la identificación pero no la clase cuando la paso por encima. Así que hice una versión css donde cuando mi mouse pasa el div, la opacidad de cierto div irá a 1.

<ul class="list-unstyled">
  <li>
    <div class="artibox" id="artibox-01">
      <div class="artibox-hover artibox-1"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 1</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary"" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-02">
      <div class="artibox-hover artibox-2"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 2</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary"" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-03">
      <div class="artibox-hover artibox-3"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 3</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here</p>
          <a class="btn-primary"" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-04">
      <div class="artibox-hover artibox-4"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 4</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
</ul>

Css:

.artibox {
  height: auto;
  width: 100%;
  display: block;
  border-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
  background-color: #888;
  background-image: none;
  color:#fff;
}

.artibox-hover {
  opacity: 0;
  position: absolute;
  z-index: 0;
  display: block;
  overflow: visible;
  width: 100%;
  height: 200px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.artibox-container {
  height: 200px;
}

.artibox-title {
  position: relative;
  width: 50%;
  height: 200px;
  padding-top: 40px;
  float: left;
  padding-right: 100px;
}

.artibox-intro {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 200px;
  padding-top: 60px;
  float: right;
}

.artibox-1 {
  background-image: url(http://cdn.koreaboo.com/wp-content/uploads/2016/02/mamamoo-melting-4.jpg);
  background-position: 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-2 {
  background-image: url(http://www.asianjunkie.com/wp-content/uploads/2016/09/MAMAMOONewYork.jpg);
  background-position: 20% 20%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-3 {
  background-image: url(http://i.imgur.com/F0V2Ctk.jpg);
  background-position: 20% 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-3 {
  background-image: url(http://www.allkpop.com/upload/2016/11/af_org/mamamoo_1478711828_af_org.jpg);
  background-position: 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-4 {
  background-image: url(http://img11.deviantart.net/4dd5/i/2016/075/4/3/mamamoo_png_by_euphoriclover-d9vbula.png);
  background-position: 0 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#artibox-01:hover .artibox-hover {
  opacity: 1;
}
#artibox-02:hover .artibox-hover {
  opacity: 1;
}
#artibox-03:hover .artibox-hover {
  opacity: 1;
}
#artibox-04:hover .artibox-hover {
  opacity: 1;
}

Mi archivo de trabajo: http://codepen.io/rae0724/pen/RKrBgw

Es muy problemático si cada vez que actualizo mi archivo necesito agregar en el hover css como a continuación:

#artibox-01:hover .artibox-hover {
  opacity: 1;
}

¿Hay alguna manera de que pueda escribir en jquery como una función, por lo que no necesito seguir repitiendo el código? Gracias. Porque soy muy malo en jquery. :(

0
demoncoder 11 ene. 2017 a las 11:05

4 respuestas

La mejor respuesta

Puede usar la regla puramente CSS como

.artibox:hover .artibox-hover {
  opacity: 1;
}

En lugar de

#artibox-01:hover .artibox-hover {
   opacity: 1;
}

Pluma actualizada

0
Satpal 11 ene. 2017 a las 08:09

Una solución más es el selector que se ajusta a todos los Id que comienzan con "artibox-"

[id^="artibox-"]:hover .artibox-hover {
  opacity: 1;
}

Además, hasta "... solo detecta la identificación, pero no la clase cuando la desplazo" puede mejorar la especificidad del selector de clase agregando el nombre de la etiqueta:

div.artibox:hover div.artibox-hover {
  opacity: 1;
}

Este truco debería afectar al elemento objetivo.

0
Banzay 11 ene. 2017 a las 08:27

Puede usar hover() que une uno o dos métodos, primero para cuando el mouse ingresa y el otro para cuando el mouse se va, y find() para encontrar el elemento en .artibox.

$('.artibox').hover(function() {
  $(this).find('.artibox-hover').css('opacity', '1');
}, function() {
  $(this).find('.artibox-hover').css('opacity', '0');
});

Vea el fragmento de trabajo a continuación:

$('.artibox').hover(function() {
  $(this).find('.artibox-hover').css('opacity', '1');
}, function() {
  $(this).find('.artibox-hover').css('opacity', '0');
});
.artibox {
  height: auto;
  width: 100%;
  display: block;
  border-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
  background-color: #888;
  background-image: none;
  color: #fff;
}
.artibox-hover {
  opacity: 0;
  position: absolute;
  z-index: 0;
  display: block;
  overflow: visible;
  width: 100%;
  height: 200px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.artibox-container {
  height: 200px;
}
.artibox-title {
  position: relative;
  width: 50%;
  height: 200px;
  padding-top: 40px;
  float: left;
  padding-right: 100px;
}
.artibox-intro {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 200px;
  padding-top: 60px;
  float: right;
}
.artibox-1 {
  background-image: url(http://cdn.koreaboo.com/wp-content/uploads/2016/02/mamamoo-melting-4.jpg);
  background-position: 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.artibox-2 {
  background-image: url(http://www.asianjunkie.com/wp-content/uploads/2016/09/MAMAMOONewYork.jpg);
  background-position: 20% 20%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.artibox-3 {
  background-image: url(http://i.imgur.com/F0V2Ctk.jpg);
  background-position: 20% 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.artibox-3 {
  background-image: url(http://www.allkpop.com/upload/2016/11/af_org/mamamoo_1478711828_af_org.jpg);
  background-position: 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.artibox-4 {
  background-image: url(http://img11.deviantart.net/4dd5/i/2016/075/4/3/mamamoo_png_by_euphoriclover-d9vbula.png);
  background-position: 0 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
  <li>
    <div class="artibox" id="artibox-01">
      <div class="artibox-hover artibox-1"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 1</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-02">
      <div class="artibox-hover artibox-2"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 2</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-03">
      <div class="artibox-hover artibox-3"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 3</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here</p>
          <a class="btn-primary" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-04">
      <div class="artibox-hover artibox-4"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 4</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
</ul>

Puede leer más sobre el método hover() aquí .

0
Ionut Necula 11 ene. 2017 a las 08:22

Puedes probar el siguiente código:

$(document).on('mouseover', '.artibox[id^="artibox-"]', function () {
  $(this).find('.artibox-hover').css('opacity', '1');
});

$(document).on('mouseout', '.artibox[id^="artibox-"]', function () {
  $(this).find('.artibox-hover').css('opacity', '0');
});

No necesitará el ": hover" css con esto.

0
Himanshu Vohra 11 ene. 2017 a las 08:29