Question

我试图让一些文字在悬停在div容器上方的图像上淡入淡出。只是为了给你一个确切的例子，我正在寻找：http://outgrow.me/。

以下是我的HTML：

<div class="project-boxes">
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
</div>

我的CSS：

/**********************
*****PROJECT BOXES*****
**********************/
.project-boxes {
    margin: 0 3%;
}

.box {
    padding: 2.5%;
    width: 20%;
    height: 120px;
    margin: 2% 3.9999999999999999999%;
    float: left;
    border: 1px solid #BABABA;
    border-radius: 5px;
}

.box h3 {
    color: #3F7250;
}

我还没有任何javascript或jquery，但我想在我的项目中实现一些。随意用小提琴或其他东西与我分享。感谢。

Answer 1

您可以使用jQuery来定位悬停事件并淡入描述。

$('.box a').hover(function() {
  $(this).find('.desc').fadeIn(500);
}, function() {
  $(this).find('.desc').fadeOut(500);
});

.box {
  position: relative;
}
.box .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background: rgba(255, 255, 255, 0.5);
}

<div class="box">
  <a href="project1.html">
    <img src="http://placehold.it/150x150" />
    <div class="desc">
      <h3>Project 1</h3>
      <p>Description</p>
    </div>
  </a>
</div>

jsFiddle

Answer 2

不需要JS。使用纯CSS和:hover

 /* SIMPLY ADD THIS TO YOUR CSS */

.box img ~ *{                  
  opacity:0;
  transition:0.3s;
}
.box:hover img ~ *{  
  opacity:1;
}

.project-boxes {
  margin: 0 3%;
}
.box {
  padding: 2.5%;
  width: 20%;
  height: 120px;
  margin: 2% 3.9999999999999999999%;
  float: left;
  border: 1px solid #BABABA;
  border-radius: 5px;
}
.box h3 {
  color: #3F7250;
}

.box img ~ *{                   /* ADD THIS */
  opacity:0;
  transition:0.3s;
}
.box:hover img ~ *{             /* AND THIS */
  opacity:1;
}

<div class="project-boxes">
  <div class="box">
    <a href="project1.html">
      <img src="../img/project1.png">
      <h3>Project 1</h3>
      <p>Description</p>
    </a>
  </div>
  <div class="box">
    <a href="project1.html">
      <img src="../img/project1.png">
      <h3>Project 1</h3>
      <p>Description</p>
    </a>
  </div>
  <div class="box">
    <a href="project1.html">
      <img src="../img/project1.png">
      <h3>Project 1</h3>
      <p>Description</p>
    </a>
  </div>
  <div class="box">
    <a href="project1.html">
      <img src="../img/project1.png">
      <h3>Project 1</h3>
      <p>Description</p>
    </a>
  </div>
</div>

Answer 3

没有JQuery：

<div class="box">
   <a href="project1.html">
     <div class='text'>
        <h3>Project 1</h3>
        <p>Description</p>
     </div>
     <img src="../img/project1.png">
   </a>
</div>

CSS：

.box {
    position: relative;
    ...
}

.box .text {
    position: absolute;
    z-index = 1;
}

.box img {
    position: absolute;
    z-index = 2;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.box img:hover {
    opacity: 0.2;
    transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
}

Answer 4

在javascript上执行此操作会比do it with jquery或CSS更复杂。但是，如果你想在这里如此糟糕地使用javascript：

// fade out

function fadeOut(el) {
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = 'none';
      el.classList.add('is-hidden');
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

// fade in

function fadeIn(el, display) {
  if (el.classList.contains('is-hidden')) {
    el.classList.remove('is-hidden');
  }
  el.style.opacity = 0;
  el.style.display = display || "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}

var btn = document.querySelector('.js-btn');
var el = document.querySelector('.js-fade');

btn.addEventListener('click', function(e) {
  if (el.classList.contains('is-hidden')) {
    fadeIn(el);
  } else {
    fadeOut(el);
  }
});

.is-hidden {
  display: none;
}
.btn {
  background: #ccc;
  border-radius: 3px;
  display: inline-block;
  padding: 5px;
}
body {
  padding: 40px;
}

<span class="js-btn btn">Click me</span>
<div class='js-fade is-hidden'>You look amazing!</div>

如何在悬停时淡入？

4 个答案: