使用悬停连接GIF和文本

时间:2017-10-21 15:27:22

标签: html css

我很难让我的悬停与GIF连接。显然,我在文本上设置display:none时没有显示,但我认为#witch:hover ~ text{ display:block}确实可行。



    #animcontainer {
  position: relative;
  margin: auto;
  overflow-y: hidden;
  #witch {
    position: absolute;
    left: 2950px;
    height: 150px;
    bottom: 50px;
    z-index: 2` #hello {
      position: absolute;
      display: none;
      border: 25px;
      padding: 1.5rem;
      background-color: orange;
      left: 3100px;
      font-size: 20px;
      border-radius: 20px;
      text-align: center;
      bottom: 200px;
      left: 2900px;
      z-index: 1;
    }
    #witch:target~#hello {
      display: block;
    }

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div id="animcontainer">
    <div id="hello"> text</div>
    <img id="potato" src="url">
  </div>
</body>

</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案