Question

我是一名初学CSS编码员。我正在学习javascript（我主要只是使用CSS进行网页动画）但是我真的坚持这个...我有一个图像在悬停时变成另一个图像。我只希望在悬停时将背景图像进行超链接。但是，当我将链接添加到页面时，它只是无法正常工作。

我到处寻找解决方案但我找不到解决方案。感谢您的投入！这是我的代码：

＆＃13;

#slidingDoors {
  /*Applying the Background Images*/
  background-image: url('/wp-content/uploads/2016/06/bwtulip-long.jpg'), url('/wp-content/uploads/2016/06/bwtulip-long.jpg'), url('/wp-content/uploads/2016/06/tulip-stand-out-long.jpg');
  background-repeat: no-repeat;
  /*Positioning the Background Images*/
  background-position: -239.5px 0px, 239.5px 0px, 0px 0px;
  /*Transition Parameters*/
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#slidingDoors:hover {
  background-position: -479px 0px, 479px 0px, 0px 0px;
}
.circles {
  text-align: center;
  height: 300px;
  width: 479px;
  background-color: #eee;
  margin: 0 50px 50px 0;
}

＆＃13;

<div id="slidingDoors" class="circles">
  <br />
  <br />
  <a href="http://www.example.com">
    <i class="fa fa-lock fa-3x fa-border"></i>
    <br />
    <br />
    <h4 class="parentregistrationtext" style="text-align: center; text-transform: uppercase;">Parent Registration / Login</h4>
  </a>
</div>

＆＃13;

Answer 1

你的意思是你希望整个区块成为一个链接吗？

＆＃13;

#slidingDoors {
  /*Applying the Background Images*/
  background-image: url('http://www.ipsroofingproducts.com/IPS/colors/Black.JPG'),
                    url('http://www.ipsroofingproducts.com/IPS/colors/Black.JPG'),
                    url('https://drscdn.500px.org/photo/125723543/q%3D80_h%3D300/a4849982fea993e08837494a890b51da');
  background-repeat: no-repeat;
  /*Positioning the Background Images*/
  background-position: -239.5px 0px, 239.5px 0px, 0px 0px;
  /*Transition Parameters*/
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#slidingDoors:hover {
  background-position: -479px 0px, 479px 0px, 0px 0px;
}
.circles {
  text-align: center;
  height: 300px;
  width: 479px;
  background-color: #eee;
  margin: 0 50px 50px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<a href="http://www.example.com">
  <div id="slidingDoors" class="circles">
    <br />
    <br />
    <i class="fa fa-lock fa-3x fa-border"></i>
    <br />
    <br />
    <h4 class="parentregistrationtext" style="text-align: center; text-transform: uppercase;">Parent Registration / Login</h4>
  </div>
</a>

＆＃13;

如果是这样，您只需移动<a>标记

的展示位置即可

或者你的意思是你想隐藏链接，所以它只有在你鼠标悬停后才出现？

仅在悬停时添加到背景图像的超链接

1 个答案: