したがって、テンプレートの助けを借りてhttp://ecofixoil.co.nzにこのWebページを作成しました。上にある黄色のボタンは、カーソルを置いてクリックすると、自分が何をするのかを知るために見つけたいくつかのCSSスクリプトを適用したものです。今度は自動ホバー効果を使用して、ページが読み込まれたときにそれぞれ1秒間ホバーしているように自動的に動作させてから、マウスにオーバーライドとして反応させます。私はウェブを検索しましたが、私が働くことができる解決策は見つかりませんでした。自動ホバー効果
マウスオーバーをシミュレートするオーバーライディングスクリプトをインストールすることはできますか？
<head></head>セクションにCSSを追加します。
<style type="text/css">
.tooltip.hover .tooltiptext {
visibility: visible;
opacity: 0.95;
}
.tooltip.hover a {
top: -5px;
}
</style>
があなたの</body>終了タグの前にJavaScriptを追加します。純粋なCSSで
<script type="text/javascript">
(function($) {
jQuery(document).ready(function() {
timer = 1000;
$('.efo_icons .tooltip').each(function() {
var icon = $(this);
setTimeout(function() {
icon.addClass('hover');
}, timer);
timer += 1000;
setTimeout(function() {
icon.removeClass('hover');
}, timer);
});
});
})(jQuery);
</script>
あなたは
$(".button").addClass("hoverEffect");
は、あなたが単に単にCSSクラスを削除する効果を削除するには
.button:hover, .button.hoverEffect {
/* your css */
}
ホバー上のように、そのクラスの同じスタイリングを使用することができ、あなたの要素にCSSクラスを追加する場合。
$(".button").removeClass("hoverEffect");
が、それは不可能ではないのですが、それは非常に必要であろう多くのコードJavascriptの代わりに私はよりメンテナンスにやさしいかもしれません。
.tooltip {
margin-top: 100px;
display: flex;
width: 250px;
justify-content: space-between;
}
a {
transition: top .2s ease-in-out;
display: flex;
width: 80px;
height: 80px;
border-radius: 6px;
top: 0;
position: relative;
background-color: goldenrod;
text-align: center;
align-items: center;
}
a:after {
content: url("http://placehold.it/50");
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon:nth-child(1) .tooltiptext {
opacity: 0;
position: absolute;
top: 0;
background: darkslategray;
color: white;
animation: tool 1s linear;
}
.icon:nth-child(1) {
animation: anim 1s linear;
}
.icon:nth-child(2) .tooltiptext {
opacity: 0;
position: absolute;
top: 0;
background: darkslategray;
color: white;
animation: tool 1s 1s linear;
}
.icon:nth-child(2) {
animation: anim 1s 1s linear;
}
.icon:nth-child(3) .tooltiptext {
opacity: 0;
position: absolute;
top: 0;
background: darkslategray;
color: white;
animation: tool 1s 2s linear;
}
.icon:nth-child(3) {
animation: anim 1s 2s linear;
}
@keyframes anim {
from {
top: 0;
}
to {
top: -1em;
}
}
@keyframes tool {
from {
top: 0;
opacity: 1;
}
to {
top: -4em;
opacity: 1;
}
}<div class="tooltip">
<a href="#industrial" class="icon efo_cog">
<span class="tooltiptext">Industrial<br>and Mechanical</span>
</a>
<a href="#industrial" class="icon efo_cog">
<span class="tooltiptext">Industrial<br>and Mechanical</span>
</a>
<a href="#industrial" class="icon efo_cog">
<span class="tooltiptext">Industrial<br>and Mechanical</span>
</a>
</div>
あなたはトリガすることはできません：JSでホバー。私は同じスタイルを使用することをお勧めします：ホバーとあなたがJSで追加することができるいくつかのclassNameのために。視覚的には、あなたが望むものになるでしょう – Anarion