私は自分のウェブサイトに入れたいものを、スクラッチでアニメーション/バージョンを作りました。これを私のウェブサイトの機能にするにはどうすればよいですか？
あなたがビデオで見ることができるように、テキストが1つの状態で表示されますが、その後、マウスがその上をホバリングされたときに変更して、あなたはのいずれかをクリックしたときに（あなたの選択であることが確認さ）緑色に変わりますオプション。 私のサイトにこの機能を持たせたいのは、人々が物事をどう解釈するかを見ることです。私は、人々が聖書をどのように認識しているかを見たいと思っています。
私はWixを使って自分のウェブサイトを作っています。このサイトにHTMLコードを挿入できるアドオンを持っていますので、このアイデアを可能にする方法があれば素晴らしいかもしれません。
これを行う方法を理解することができれば、非常に意味があり、非常に感謝しています。 ありがとう
スパン内にテキストを折り返してIDを付けます。このIDをcssファイルに保存します。このCSSファイル内でIDを呼び出して、黄色の背景色を付けます。その上にマウスを置くと、jQueryが必要になります。 jQueryのマウス入力機能とマウス出力機能を研究します。 ヘルプが必要な場合は、サイトへのリンクを送信してください。
#nameofid{
background-color: yellow;
}作業、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>
あなたが試したコードを示してください。 stackoverflowに関する質問をするためのリンクは次のとおりです：https://stackoverflow.com/help/how-to-ask –