Question

我正在使用Bootstrap创建我的第一个HTML网站，我一直在关注此模板：Freelancer - Start Bootstrap。

我已经能够自定义模板以满足我的大部分需求。但是，我无法弄清楚如何制作它，以便当我将鼠标悬停在图片上时，会出现彩色叠加层并显示YouTube徽标，然后当您点击透明叠加层时，链接会打开。

使用我正在使用的模板，下面有一个示例，但是当您点击叠加层时，我想要打开一个外部URL，而不是模态开口。为此，我想我可以将href更改为指向外部网址，但这似乎不起作用。我可以右键单击并在新窗口中打开，但单击叠加层不会执行任何操作。

带叠加图像的图像标志：

<div class="col-md-4 col-lg-3">
  <a class="portfolio-item d-block mx-auto" href="#s-sign">
    <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
      <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
        <i class="fa fa-search-plus fa-3x"></i>
      </div>
    </div>
    <img class="img-fluid" src="img/project/s_sign.png" alt="">
  </a>
</div>

点击时弹出的模式：

<div class="portfolio-modal mfp-hide" id="s-sign">
  <div class="portfolio-modal-dialog bg-white">
    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
      <i class="fa fa-3x fa-times"></i>
    </a>
    <div class="container text-center">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2 class="text-secondary text-uppercase mb-0">Decorative Sign</h2>
          <hr class="star-dark mb-5">
          <img class="img-fluid mb-5" src="img/project/s_sign.png" alt="">
          <p class="mb-5">The frame is made from poplar. The slats are red oak. The "S" is MDF and was cut out by hand.</p>
          <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
            <i class="fa fa-close"></i>
            Close Project</a>
        </div>
      </div>
    </div>
  </div>
</div>

我尝试修改href以指向外部网址而不是模态部分：

<div class="col-md-6 col-lg-4">
  <a class="projects-item d-block mx-auto" href="https://youtu.be/qXev3N5QE9A">
    <div class="projects-item-caption d-flex position-absolute h-100 w-100">
      <div class="projects-item-caption-content my-auto w-100 text-center text-white">
        <i class="fa fa-youtube fa-3x"></i>
      </div>
    </div>
    <img class="img-fluid" src="img/youtube/tote.png" alt="">
  </a>
</div>

我知道如何制作它以便我可以点击图片，并打开URL，如下所示，但我希望在悬停时显示叠加层和徽标。

<div class="col-md-6 col-lg-4">
  <a class="nav-link external" href="https://youtu.be/zjTrW9-GrSs">
    <img class="img-fluid" src="img/youtube/tote.png" alt="">
  </a>
</div>

然而，在图像上显示叠加，可以右键单击打开，但无法单击打开：

Answer 1

这可能会让你开始。

在你的引导列中，创建一个容器div，它是你希望一个在另一个上面移动的图像/叠加层的大致形状。

在容器div中，应该创建position:relative，再创建两个容器div，position:absolute（这样就可以正好坐在另一个上面）

在每个pos：abs容器div里面去你的特定图像和youTube徽标/覆盖。

然后你可以使用javascript / jquery在悬停（或mouseenter / mouseleave）上交换它们。

＆＃13;

$('.myImg').mouseenter(function(){
  $(this).fadeOut();
  $(this).next().fadeIn();
});
$('.ytLogo').mouseleave(function(){
  $(this).fadeOut();
  $(this).prev().fadeIn();
});
$('.ytLogo').click(function(){
  $(this).find('a').click();
});

＆＃13;

.ytContainer{position:relative;}
.myImg{position:absolute;height:50px;width:50px;}
.ytLogo{display:none;}h

.w-100{width:100px;}
.h-100{height:100px;}
.fa{width:100px;height:100px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 

<div class="col-xs-6 col-md-6 col-lg-4">
  <div class="ytContainer">
    <div class="myImg">
      <img class="img-fluid ytImg" src="http://placeimg.com/100/100/animals" alt="">
    </div>
    <div class="ytLogo">
      <a class="projects-item d-block mx-auto" href="https://youtu.be/qXev3N5QE9A">
        <div class="projects-item-caption d-flex position-absolute h-100 w-100">
          <div class="projects-item-caption-content my-auto w-100 text-center text-white">
            <i class="fa fa-youtube fa-3x"></i>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

＆＃13;

可以右键单击并打开但无法单击打开

1 个答案: