Question

我已经在Scratch上创建了一个动画/版本的东西，我希望在我的网站中包含这些内容。

正如您在视频中看到的那样，文本显示为一种状态，但是当鼠标悬停在其上时会发生变化，然后在您单击其中一个选项时变为绿色（确认为您的选择）。我希望在我的网站上拥有此功能的原因是为了了解人们如何以不同的方式解释事物。我希望通过对某些关键术语和经文使用这个选项来看人们如何看待圣经，并让人们选择他们认为的含义。

我正在使用Wix创建我的网站，并且他们有一个附加组件，允许您将HTML代码插入到网站中，所以如果有办法让这个想法成为可能，那就太棒了。

如果我能够理解如何做到这一点意味着很多，我将非常感激。感谢

Answer 1

在一个范围内包装文本并为其指定一个ID。您将此ID存储在css文件中。在此css文件中，调用ID并为其指定黄色的背景颜色。当您将鼠标悬停在它上面时，您将需要jQuery。研究jQuery的鼠标输入和鼠标输出功能。如果需要更多帮助，请发送链接到您的网站。

#nameofid{
    background-color: yellow;
}

Answer 2

使用jQuery和 ~~Tether.io~~ 的工作 BASIC 示例。

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Choose an Option on Hover</title>



  <!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" /> -->
  <style type="text/css" media="all">
    #selection {
      position: relative;
      background-color: yellow;
      display: inline-block;
    }

    #selection .options {
      position: absolute;
      z-index: 2;

      /* regulated using http://tether.io */
      left: 0;
      top: 100%;

      display: block;
      background-color: #454545;
      padding: 1rem;
      min-width: 150px;
    }

    #selection .options .option {
      display: block;
      background-color: black;
      color: #fff;
      padding: .35rem .7rem;
      margin-bottom: .7rem;
      cursor: pointer;

      border: 1px solid transparent;
    }

    #selection .options .option:hover {
      border: 1px solid #fff;      
    }

    #selection .options .option.choice {
      background-color: lime;
    }

  </style>
</head>
<body>
  <h1>Choose an Option on Hover</h1>



  <p>
    This is an example of html which I
    <span id="selection">
          <span class="display">Would</span>
          <span class="options">
            <button class="option" type="button" value="Option 1">Option 1</button>
            <button class="option" type="button" value="Option 2">Option 2</button>
          </span>
    </span>
    like to make.
  </p>



  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> -->
  <script type="text/javascript">
    $(document).ready(function() {
      var $selection = $('#selection');
      var $display = $selection.find('.display');
      var $options_container = $selection.find('.options');
      var $options = $selection.find('.option');

      $.each($options, function() {
        $(this).click(function() {
          var $choice = $(this);
          $display.text($choice.val());
          $choice.addClass('choice');
          $choice.siblings().removeClass('choice');
          $options_container.fadeOut();
        })
      });



      $selection.mouseover(function() {
        $options_container.fadeIn();
      });


      /*new Tether({
        element: $selection,
        target: $options_container,
        attachment: 'bottom left',
        targetAttachment: 'top left'
      });*/

      $options_container.fadeOut();

    });
  </script>
</body>
</html>

如何将其转换为我网站的功能？

2 个答案: