Question

所以，我在http://ecofixoil.co.nz的帮助下，在模板的帮助下构建了这个网页。顶部的黄色按钮是我发现的几个css脚本的改编，让他们在你将鼠标悬停在它们上面时做他们所做的事情。现在我想要一个自动悬停效果让它们自动表现就像你在页面加载时将它们悬停在它们上面一秒钟，然后作为覆盖对鼠标作出反应。我在网上搜索过但没找到任何可以解决的解决方案。

我可以安装一个重载脚本来模拟鼠标悬停在它们上面吗？

Answer 1

如果您为元素添加css类

$(".button").addClass("hoverEffect");

然后你可以简单地使用与悬停

相同的样式

.button:hover, .button.hoverEffect {
    /* your css */
}

要删除效果，只需删除css类。

$(".button").removeClass("hoverEffect");

Answer 2

在<head></head>部分添加CSS：

<style type="text/css">
.tooltip.hover .tooltiptext {
    visibility: visible;
    opacity: 0.95;
}

.tooltip.hover a {
    top: -5px;
}
</style>

在</body>结束标记之前添加javascript：

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

Answer 3

使用纯CSS并非不可能，但它需要相当多的代码。一个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>

自动悬停效果

3 个答案: