企业公司网站扶植：3标致的CSS Hover结果，您能够增加到您的Divi菜单

你的菜单是拜候者在拜候你的网站时最早看到的工具之一，以是你但愿它有一些气概，对吗？你固然晓得！这便是为甚么在明天的文章，我将分享三种体例，增加一些杰出的悬停结果到您的菜单与自界说CSS。

悬停结果应当是奥妙的，咱们想要视觉乐趣，但这不是网站最主要的局部，你的内容是。这些将增加适当的“弹出”到您的Divi导航。

咱们企业公司网站扶植不只会增加一个很好的悬停结果，并且还会有一些款式利用于勾当页面的链接。比方，若是用户在主页上，那末菜单中的主页链接就会有一些小的设想处置。这是一个罕见的视觉标记，包含在网站上，以赞助提示用户他们在网站上的地位。这不是相对须要的，但这是一个很好的赞助用户休会。

主题定制法式设置

起首，对统统的款式，咱们将利用头格局的默许设置。若是您方才装置了Divi，您不须要设置装备摆设这个设置，它应当主动设置为这个设置。

格局单线上面

在这个菜单款式中，咱们将增加一条从左到右的直线，它就在被悬停的菜单项上面。它还将在勾当页面链接的正下方设置一条静态行。

灵感

这是一个很是好的结果，能够很好地任务在几近任何范例的网站，加上编辑这类气概的代码，以转变色彩和线宽是相称等闲的任何级别的用户。这是一个很是风行的悬停结果，我在网站上看到了良多年。我以为它的奥妙的处所使它如斯多用处，它能够用于房地产网站，和音乐家的网站和统统介于二者之间的。

实行

企业公司网站扶植将以下代码增加到子款式表或divi主题选项>通用>自界说CSS框:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

款式两层厚的“正方形”，上面是线条。

在这类菜单款式中，咱们将安排一个大的“块状”行，从鼠标悬停在菜单项下的菜单局部向下挪动。它还在勾当菜单链接上安排了一个块状框。

灵感

我在我开辟的一个名为Execute的Divi子主题上利用了这类气概(我将链接到上面的演示，如许您就能够看到现实站点上的悬停)。从视觉上看，这并不像第一种气概那样奥妙，我以为挑选适合的站点来利用它才是关头。这是主要的婚配任何范例的小设想细节，如悬停结果，以网站的全体感受。

实行

企业公司网站扶植将上面的代码增加到子主题的款式表中，或增加到Divi的自界说CSS框中的ThemeOptionsGeneral选项卡下。就编辑色彩而言，变动很是等闲，可是若是您打算变动边框的宽度，您将发明还须要利用CSS中的其余数字。

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/
 padding: 10px;
 margin-bottom: -10px;
}

款式三背景黑色按钮

此菜单款式将菜单项转换为具备调和悬停色彩的按钮。它还为勾当菜单链接供给了另外一种零丁的色彩。

灵感

固然，这是受钮扣开导的。TAG标签： 企业公司网站扶植：3标致的CSS   Hover结果   您能够增加到您的Divi菜单