滑鼠懸停時 選單文字改變

Flatsome主題

這是Flatsome選單用 其他主題要確認一下css做調整
首先選單的文字

<span class="original-menu">原本</span><span class="hover-menu">變化</span>

之後附加CSS

a.nav-top-link:hover .original-menu {
display: none;
}


a.nav-top-link:hover .hover-menu {
display: block;
}

a.nav-top-link .hover-menu {
display: none;
}

Elementor選單

首先選單的文字

<span class="original-menu">原本</span><span class="hover-menu">變化</span>

之後附加CSS

/*以下為使用elementor的header*/
/*有限制寬度才不會變來變去 然後文字水平置中*/

@media(min-width:1025px){
  a.elementor-item span{
    width:60px;
    text-align:center;
  }
}

a.elementor-item:hover .original-menu {
  display: none;
  text-align:center;
}

a.elementor-item:hover .hover-menu {
  display: block;
  text-align:center;
}

a.elementor-item .hover-menu {
  display: none;
  text-align:center;
}