图片取决于链接答案

【问题标题】：Image dependent on link图片取决于链接
【发布时间】：2020-08-26 12:56:40
【问题描述】：

我想将图像 div 取出到 a href 之外，同时保持按下链接时它对它的影响。我试过了，但一旦它不在主 div 内，动画就不起作用了。

注意：JS脚本是设置延迟让图片动画然后访问链接。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
  <div class="response">
    <img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
  </div>
</a>

CSS

body{
  background-color:black;
}

a {
  overflow: hidden;
}
.section {
  position: absolute;
width: 100%;
    height: 100%;
    left: 0;
    top: 0;
      transition: 4s ease-out;
}
.response {
  position: absolute;
  top: 0px;
  left: 00px;
  width: 100%;
  height: 100%;
  transition: 4s ease-out;
  opacity: 1;
}
.clicked {
  animation-delay: 2s;
  animation: event 2s;

  
}
.clicked .response {
  
  animation: response 4s;
  
}

@keyframes response {
  0% {} 16% {
    opacity: 1;
    
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(1.15);
   
  }
  100% {
    
    opacity: 0;
  }
}

$(document).ready(function() {
  $('.section').click(function(e) {
    e.preventDefault();
    var $a = $(this).addClass('clicked');
    setTimeout(function() {
      window.location.assign($a.attr('href'));
    }, 1700);
  });
});

【问题讨论】：

而不是做 $(this).addClass('clicked');做 $('.response').addClass('clicked');并且在你的 CSS 中只定位 div 类，点击动画。
@radlaz 抱歉，我没听明白。
@radlaz 我修改了代码，它只是开始播放动画，甚至没有点击链接。
我错过了阅读您的一些代码.. 抱歉忘记了。当您说要“将图像 div 取出到 a href 之外”时，您能指定您的意思吗？您的意思是看起来在 a 标签之外还是实际上在 a 标签之外？我对你想要什么感到困惑。
@radlaz 实际上在 a 标签之外。我想要单独的链接，单独的图像，但是在单击链接后要启用图像的动画，就像现在一样。

标签： javascript html jquery css frontend

【解决方案1】：

好吧，我仍然不确定您是使用 JavaScript 将 div 放在 a 标签之外，还是您只是想手动对其进行硬编码。我假设后者

<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
</a>

<div class="response">
    <img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
</div>

为了你的 JS

$(document).ready(function() {
  $('.section').click(function(e) {
    e.preventDefault();
    var $responsiveDiv = $('.response')
     $responsiveDiv.addClass('clicked'); // Instead of adding clicked to a tag  add class clicked directly to responsive div
    setTimeout(function() {
      window.location.assign($responsiveDiv.attr('href'));
    }, 1700);
  });
});

为了你的 CSS

body{
  background-color:black;
}

a {
  overflow: hidden;
}
.section {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: 4s ease-out;
}
.response {
  position: absolute;
  top: 0px;
  left: 00px;
  width: 100%;
  height: 100%;
  transition: 4s ease-out;
  opacity: 1;
}
.clicked {
  animation-delay: 2s;
  animation: event 2s;

  
}
.clicked { /* Changed */ 
  
  animation: response 4s;
  
}

@keyframes response {
  0% {} 16% {
    opacity: 1;
    
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(1.15);
   
  }
  100% {
    
    opacity: 0;
  }
}

【讨论】：

感谢您的回复。您的 HTML 是正确的，但不幸的是动画无法正常工作。
我对 css 的评论使用了错误的格式，导致它无法正常工作。它现在应该可以工作了，我在代码笔上对其进行了测试。老实说我今天真的很累
别担心。非常感谢您的回复，这正是我的想法。你能详细说明你在 css 中做了什么吗？

【解决方案2】：

您是否考虑过使用data- 属性？这可能是解决这个问题的最简单方法：

$(document).ready(function() {
  $('.response img').click(function(e) {
    var $a = $(this).addClass('clicked');
    setTimeout(function() {
      window.location.assign($a.attr('data-href'));
    }, 1700);
  });
});

body{
  background-color:black;
}

a {
  overflow: hidden;
}
.response {
  position: absolute;
width: 100%;
    height: 100%;
    left: 0;
    top: 0;
      transition: 4s ease-out;
}
.clicked {
  animation-delay: 2s;
  animation: event 2s;
  animation: response 4s;
}

@keyframes response {
  0% {} 16% {
    opacity: 1;
    
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(1.15);
   
  }
  100% {
    
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="response">
    <img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" data-href="http://google.com" />
</div>

如果您仍然需要，您现在可以将a 移动到您喜欢的任何地方。

【讨论】：

感谢您的回答，但没有奏效。你可以看看上面的答案。
我一定误解了你想要达到的目标。但是 sn-p 完全符合我的要求。恭喜您找到有效的答案:)
我的坏人。使用 data-href 鼠标没有改变，所以我认为链接不起作用。
很高兴我可以添加自己的配额