Html 我怎样才能把它变成我网站的一个功能？_Html

Html 我怎样才能把它变成我网站的一个功能？

html

Html 我怎样才能把它变成我网站的一个功能？,html,Html,我已经做了一个动画/版本的东西，我希望包括在我的网站上从视频中可以看到，文本以一种状态显示，但当鼠标悬停在文本上时，文本会发生变化，当您单击其中一个选项时，文本会变为绿色（确认为您的选择）。我希望在我的网站上有这个功能的原因是想看看人们如何以不同的方式理解事物。我希望看到人们通过对某些关键术语和经文的选择来理解圣经，并允许人们选择他们认为它的含义我正在使用Wix制作我的网站，他们有一个附加组件，可以让你在网站中插入HTML代码，所以如果有办法让这个想法成为可能，那就太棒了如果我能理解如

我已经做了一个动画/版本的东西，我希望包括在我的网站上

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

我正在使用Wix制作我的网站，他们有一个附加组件，可以让你在网站中插入HTML代码，所以如果有办法让这个想法成为可能，那就太棒了

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

谢谢

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

#nameofid{
背景颜色：黄色；
}

使用

jQuery

和

Tether.io

的工作，BASIC示例


选择一个悬停选项
#挑选{
位置：相对位置；
背景颜色：黄色；
显示：内联块；
}
#选择。选项{
位置：绝对位置；
z指数：2；
/*规范使用http://tether.io */
左：0；
最高：100%；
显示：块；
背景色：#4545；
填充：1rem；
最小宽度：150px；
}
#选择。选项。选项{
显示：块；
背景色：黑色；
颜色：#fff；
填充物：35雷姆。7雷姆；
边缘底部：.7rem；
光标：指针；
边框：1px实心透明；
}
#选择。选项。选项：悬停{
边框：1px实心#fff；
}
#选择。选项。选项。选择{
背景色：石灰；
}
选择一个悬停选项

这是一个html的例子，我
将
选择1
选择2
我喜欢做。

$（文档）.ready（函数（）{
变量$selection=$（“#selection”）；
var$display=$selection.find（'.display'）；
var$options_container=$selection.find（'.options'）；
var$options=$selection.find（'.option'）；
$.each（$选项，函数（）{
$（此）。单击（函数（）{
var$choice=$（此项）；
$display.text（$choice.val（））；
$choice.addClass（'choice'）；
$choice.sides（）.removeClass（'choice'）；
$options_container.fadeOut（）；
})
});
$selection.mouseover（函数（）{
$options_container.fadeIn（）；
});
/*新系绳({
元素：$selection，
目标：$options\u容器，
附件：'左下'，
targetAttachment:“左上角”
});*/
$options_container.fadeOut（）；
});

请显示您尝试过的代码。以下是有关如何询问stackoverflow问题的链接：

<!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>