如何將此功能變成我網站的功能？

-4

我在我的網站中包含了一些我想要包含的內容的動畫/版本。如何將此功能變成我網站的功能？

正如你可以看到在視頻，文本顯示在一個狀態，但隨後，當鼠標懸停在它的變化，然後變成綠色（確認你的選擇）當你點擊的一個選項。我希望在我的網站上擁有此功能的原因是爲了瞭解人們如何以不同的方式解釋事物。我希望看到人們如何通過對某些關鍵術語和詩句選擇這個選項來看待聖經，並讓人們選擇他們認爲的意思。

我正在使用Wix製作我的網站，並且他們有一個插件允許您在網站中插入HTML代碼，所以如果有辦法讓這個想法成爲可能，那就太棒了。

這將意味着很多，如果我能夠理解如何做到這一點，我將非常感激。謝謝

來源

2017-10-08 Tommy Gibson

請顯示您試過的代碼。這裏是如何在stackoverflow上提問的鏈接：https：//stackoverflow.com/help/how-to-ask –

將文本包裹在一個範圍內並給它一個id。您將此ID存儲在css文件中。在這個CSS文件中，調用ID並給它黃色的背景顏色。當你將鼠標懸停在它上面時，你將需要jQuery。研究jQuery的鼠標移入和鼠標移出功能。如果需要更多幫助，請發送一個鏈接到您的網站。

#nameofid{ 
 
    background-color: yellow; 
 
}

來源

2017-10-09 01:34:17 Dale

一個工作，BASIC使用jQuery和~~Tether.io~~例子。

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

來源

2017-10-09 02:46:37 sgiant

如何將此功能變成我網站的功能？

回答

相關問題