自動懸停效果

因此，我在模板的幫助下建立了此網頁http://ecofixoil.co.nz。頂部的黃色按鈕是我發現的幾個css腳本的改編，讓他們在您將鼠標懸停並點擊它們時執行它們的操作。現在我想要一個自動懸停效果，讓它們自動運行，就像在頁面加載時每秒鐘懸停在它們上面一樣，然後作爲覆蓋反應到鼠標。我已經在網上搜索，但沒有找到任何解決方案，我可以工作。自動懸停效果

我可以安裝一個覆蓋腳本來模擬鼠標懸停在它們上面嗎？

來源

2017-08-04 Joe90

不能觸發：用JS徘徊。我建議使用相同的樣式：懸停和一些可以添加JS的className。在視覺上它會是你想要的 – Anarion

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

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

來源

2017-08-04 11:12:13 Sergej

這真的很棒。非常感謝。 – Joe90

只有一件事，是否有可能讓它進入無限循環但停止並被實際的鼠標懸停在按鈕上？ – Joe90

如果添加CSS類到元素

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

那麼你可以簡單地使用相同的造型該類作爲懸停

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

要刪除的效果只需刪除CSS類。

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

來源

2017-08-04 11:01:06

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

來源

2017-08-04 11:37:08 Gerard

自動懸停效果

回答

相關問題