html - anchor 标记不适用于动画 div 中的 img-6ren

html - anchor 标记不适用于动画 div 中的 img

转载作者：行者123 更新时间：2023-11-28 10:21:29

25

4

所以我正在制作一种太阳系页面。我尝试做的是当一个人点击一个星球时，它会将他们重定向到页面。但由于某种原因，它不起作用。就像 anchor 不存在一样。我试图用图像为 anchor 标记设置动画，但这似乎不起作用。

HTML

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            </head>
    <body>
<!-- content to be placed inside <body>…</body> -->
<div id="one"><a id="aone" href="http://google.com"><img src="one.png"></a></div>
<div id="two"><img src="two.png"></div>
<div id="three"></div>
    </body>
</html>

CSS

body{
  position: absolute;
  top: 50%; left: 50%;
  margin: -150px;
  border: dashed 1px;
  width: 300px; height: 300px;
  border-radius: 50%;
  content: '';
}

#one {
  text-align: center;
  position: absolute;
  top: 50%; left: 50%;
  margin: -25px;
  width: 50px; height: 50px;
  animation: rot1 8s infinite linear;
  -webkit-animation: rot1 8s infinite linear;
}
@-webkit-keyframes rot1 {
  0% { -webkit-transform: rotate(0deg) translate(300px) rotate(0deg); }
  100% { -webkit-transform: rotate(360deg) translate(300px) rotate(-360deg); }
}

@keyframes rot1 {
  0% { transform: rotate(0deg) translate(300px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(300px) rotate(-360deg); }
}



#two {
  text-align: center;
  position: absolute;
  top: 50%; left: 50%;
  margin: -25px;
  width: 50px; height: 50px;
          transparent 49%, black 49%, black 51%, transparent 51%);
  animation: rot2 34s infinite linear;
  -webkit-animation: rot2 34s infinite linear;
}
@-webkit-keyframes rot2 {
  0% { -webkit-transform: rotate(0deg) translate(150px) rotate(0deg); }
  100% { -webkit-transform: rotate(360deg) translate(150px) rotate(-360deg); }
}

@keyframes rot2 {
  0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(300px) rotate(-360deg); }
}

#three {
  text-align: center;
  position: absolute;
  top: 50%; left: 50%;
  margin: -25px;
  width: 50px; height: 50px;
  background: 
    linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%), 
    rgba(0,0,255,.3) linear-gradient(90deg, 
          transparent 49%, black 49%, black 51%, transparent 51%);
  animation: rot3 34s infinite linear;
  -webkit-animation: rot3 34s infinite linear;
}
@-webkit-keyframes rot3 {
  0% { -webkit-transform: rotate(0deg) translate(50px) rotate(0deg); }
  100% { -webkit-transform: rotate(360deg) translate(50px) rotate(-360deg); }
}

@keyframes rot3 {
  0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}

http://jsfiddle.net/DJsU9/

最佳答案

我不知道是否可以使用 CSS transform 属性移动真正的 anchor 位置(不仅仅是图形位置)，但是对于这个问题有一个非常简单的解决方案，无需使用 javascript :

您可以创建三个不可见的圆圈，在每个圆圈上放置链接，然后将它们放置在现有动画上。这种方法很好，因为即使用户点击了错误的位置，链接也会起作用。

请注意，我用透明的红色给圆圈上色，但您可以(并且应该)通过删除 background:rgba(255,0,0,0.5); 行来移除颜色。

这是相关的 CSS:

.circle1{
    display:block;
    position:absolute;
    top:50%;
    margin-top:-325px;
    left:50%;
    margin-left:-325px;
    width:650px;
    height:650px;
    background:rgba(255,0,0,0.5); /* unnecessary */
    border-radius:100%;
}
.circle2{
    display:block;
    position:absolute;
    top:50%;
    margin-top:-175px;
    left:50%;
    margin-left:-175px;
    width:350px;
    height:350px;
    background:rgba(255,0,0,0.5); /* unnecessary */
    border-radius:100%;
}

HTML:

<div id="one"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/one.png"></a>
</div>
<div id="two"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/two.png"></a>
</div>
<div id="three"></div>

<a class="circle1" href="http://dedobbelaere.sisamul.com/two.png"></div>
<a class="circle2" href="http://google.com"></div>

JSFiddle

关于html - anchor 标记不适用于动画 div 中的 img，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23981092/

25

4

0

文章推荐： jQuery Bounce 忽略定位

文章推荐： javascript - 在 jQuery Draggable 中设置多个包含

文章推荐： swift - 如何获得阶乘的计算步骤？

文章推荐： css - 交替 Richfaces 数据表行颜色

java - 将字符串中的替换为
我想替换每一个带结束标记字符串中的标记。该字符串实际上是一个 html 文档，其中 img 标记由我生成，并且始终如下所示: Src 是用户输入，所以它可以是任何东西。我做了一个正则表达式，不确
Javascript img onclick 总是点击所有 img，无法捕捉到点击的正确 img
我使用数组通过 getElementsByClassName 存储我所有的 imgs。我需要知道哪个 img 被点击或 mouseover/mouseout，所以我使用循环来检查哪个 img 被点击
javascript - if img.src === img.src === img.src - 无法让它工作
我正在尝试使用图像制作一款类似 Match3 的游戏，但我无法进行比较。我正在为固定数量的 atm 执行此操作，只是为了让它正常工作，稍后应该在 foreach 循环中。如果有什么区别的话，该函数位于
javascript - img 高度与 img 宽度成比例，但 img 宽度占父级的百分比
我希望你能帮助我:) 我想定义 img 的高度，相对于图像的“实际”宽度。但宽度是动态的，因为它占父对象的百分比(wxample 的浏览器窗口)。为什么我需要高度？:没有高度它工作正常，但我需要它，
jquery - $(img).load() 和/或 img.onload=... 中的 img.width 和 img.height 在 IE8 中返回垃圾值
我知道这个话题被讨论了很多，但我找不到任何适合我的解决方案。所以，我的代码大致是: var img =me.images[curID] var f = function() { var
javascript - Img 模态只打开第一个 img
我试图在一个页面上列出多个图像，但当您单击图像时，它会以模式打开。它适用于第一张图片，但不适用于其他图片，我假设这是一个 JS 问题，我尝试设置一个空的 var，然后将其设置为获取元素 ID(每个
asp.net - 如何将所有 HTML img 关闭标签转换为 XML 兼容？ ( 到 )
任务:我们正在通过 HttpWebRequest 抓取 HTML 内容(约 6,000 个调用)。该字符串经过修剪并存储在 SQL Server 2014 数据库中，以便作为 XML 进行处理。问题
c++ - OpenCV:断言失败 ((img.depth() == CV_8U || img.depth() == CV_32F) && img.type() == templ.type())
我从上面得到这个错误，不知道如何避免它。我的目的是获取屏幕截图，然后对其进行模板匹配，以查看此时屏幕上是否显示图标。到目前为止，它只是图标的位置。我的代码: #include "opencv2/hig
css - 如何在容器中垂直和水平居中 img - img 可能比容器大
我有一个包含图像的容器，该图像是从应用程序加载的，因此容器的尺寸是已知的，而图像会有所不同。我目前有以下 css: #secondary_photos { height: 100px; wi
css - Img 没有加载 img 类？
我正在尝试设置一个随分辨率缩放但看起来仍然不错的页面背景..这就是我正在使用的.. 站点是http://www.gd-gaming.com/wordpress ，如果你用 Firebug 检查它，它只
jquery - 删除 img 的父标签并仍然保留 img
目前我有如何删除包装 img 标签的 p 标签？所以我可以得到.. 最佳答案使用 $('p > img').unwrap(''); 这将删除 img 周围的所有 p。您应该使用 cl
html - 围绕元素划线
我想要动画 3 .svg图片: 和css : .sequence { position: relative; } .sequence img { position: ab
javascript - 取:first elem img src content and pop 2nd elem bg-img property (featured img in WP)
我有外部 RSS 提要填充以下重复出现的类 elements 。 {teaserImage} {teaserImage} {teaserImage} 我想简单地获取 :first 实例，该实例也是来自
node.js - 通过编译应用程序将转换为 Base64 ，使图像立即随应用程序加载
这是一个独特的问题: 我不想使用浏览器 JavaScript 来解决这个问题，请继续阅读... 我要转换通过编译应用程序( ng build 或 ng serve )到 Base64 img 标签，
CSS，img 悬停在标签内影响下一个 img 的不透明度
悬停在中的第一张图片上标记，我需要使用 CSS 增加第二张图片的不透明度。我试过使用 +和 ~运营商，无法让它发挥作用。任何帮助将不胜感激。最佳答案 a:hover + img
javascript - 包装并传递循环索引后从 img.onload 中访问 img
我已经尝试解决这个问题有一段时间了，但我迷路了，有人吗？ for(var i=0; i<10; i++) { var Img = new Image(); Img.onload = (
jQuery : Hover on img to change img and text
这就是我想要实现的目标: 当用户将鼠标悬停在较小的图像之一上时: 较小的图像 + 文本应替换较大的图像 + 文本。当用户没有悬停时；将大集返回到其原始图像和文字。这就是我到目前为止所拥有的。它没有
javascript - 将所有标签替换为 img 替代文本
我知道如何在 php 中执行此操作，但我需要在 javascript/jquery 中完成此操作。我正在尝试执行以下操作: $('#NewBox').html( $('#OldBox').html(
jquery - 删除任何具有 img 子级的段落标签，但不删除 img
我正在使用一个 CMS (ExpressionEngine)，它将段落标签包裹在图像周围。我正在使用响应式图像(最大宽度:100％)，并且由于我还在段落上定义宽度，因此它会导致问题。我想使用 jQue
javascript - TinyMCE 把变成
Tinymce 正在删除我的 img 结束标记并生成无效的 xhtml。它变成了这个进入这个我也在使用 codemagic，但是在查看 html 时它仍然显示 .我也试过包括 , 但输出是

首页

博学

6Ren·AI

商城

html - anchor 标记不适用于动画 div 中的 img