Question

我正在尝试获取可点击的图标，它们可以工作，但是当我添加一些东西时，它们就停止了工作。当我单击它们时，它们不会像使用它们一样执行任何操作

我已经尝试过切换CSS和HTML并重新排列它们以及删除一些CSS，但是单击图标仍然无法正常工作。

HTML


    <div id="star" class="video mask overlay"><canvas class="cover"></canvas></div>
    <section id="home" class="home">



    <script src="zzz/js/jquery.js"></script>
    <script src="zzz/js/bootstrap.min.js"></script> 
    <script src="zzz/js/modernizr.custom.js"></script>
    <script src="zzz/js/plugins.min.js"></script>
    <script src="zzz/js/main.js"></script>

</head>
 <body scroll="no" style="overflow: hidden">
<body>
<div class="textglitch">
  <a class="textglitch-link"><span>Elf</span></a>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script  src="function.js"></script>
    <div class="gg">
    <a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<div>
</a>
</body>

CSS

* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#000;
  background: transparent;
  border:none;
}

html, body {
  height: 100%;
  width: 100%;  
    margin-top: 10%;
}

body {
  background: #111;
  font-family: 'Roboto', sans-serif;
}

.textglitch {
  position: relative;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  z-index: 1;
  font-size: 5vw;
  font-weight: 700;
  margin: 50px 0;
}

.textglitch .textglitch-link {
  position: relative;
  display: inline-block;
}

.textglitch-link span {
  position: relative;
  z-index: 2;
  color: #fff;
}

.blur {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}

.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-content);
  visibility: hidden;
}

.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
  visibility: visible;
}

.textglitch .textglitch-link:before {
  color: rgba(255, 0, 188, 0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}


.textglitch .textglitch-link:after {
  color: rgba(0,255,255,0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}

@keyframes textglitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
  20% {
    -webkit-transform: translate(-3px, 3px);
    transform: translate(-3px, 3px)
  }
  40% {
    -webkit-transform: translate(-3px, -3px);
    transform: translate(-3px, -3px)
  }
  60% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px)
  }
  80% {
    -webkit-transform: translate(3px, -3px);
    transform: translate(3px, -3px)
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
}
.gg {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
 text-align: center;
}
div.gg {
margin: 0 auto;
width: 120em;
}

.cover{
    background:none !important;
}
.cover,
.image,
.video,


.video-fallback {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

我希望它是我单击的样子，它将打开一个新选项卡并转到页面。

The 添加了

我添加了，但是仍然无法点击。

doesn't work

Answer 1

您只需要关闭标签！喜欢：

<a href="https://www.byron-bay.com/" >target="_blank"</a>

Answer 2

您需要执行以下操作：

type Foo = { [key: string]: number } const func = <T extends Foo>(obj: T): T => { for (const name in obj) { obj[name] = 1 } return obj }

基本上，您需要将图像包含在标签中！

Answer 3

如果您从html文件中删除以下代码：<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" media="screen">

该网站可以正常使用可点击的图片，因此问题出在您的css文件上！

Answer 4

问题出在您的CSS文件上！

.video-fallback {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;

}

将此新代码粘贴到您的CSS文件中！它将可以使用corectyl！

CLICK HERE FOR THE NEW CSS FILE!

问题在于位置：绝对！

当我的社交媒体图标链接时，它们不起作用

4 个答案: