Slider hover 底部彩条效果不工作

Question

I working on webpages containing tabs in which when hovering effect with slider is added but not working as expected here am attaching the code.我在包含选项卡的网页上工作，其中添加了 slider 的悬停效果但没有按预期工作，我附上了代码。 when the mouse hovers over the slider has to transition ease 0.3s in the whole tab.当鼠标悬停在 slider 上时，整个选项卡中的过渡缓和 0.3 秒。

I want.container.slider{ position:relative;我想要.container.slider{ position:relative;

but the blue slider getting hidden and also am not getting the hover effect但是蓝色的 slider 被隐藏了，也没有得到 hover 的效果

 *{ margin: 0; padding: 0; } body{ min-height: 100vh; display: flex; background: #ff45 }.container{ height: 80px; width: 100%; font-family: sans-serif; line-height: 80px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); }.container ol{ display: flex; list-style: none; }.container ol li{ height: 100%; width: 100%; text-align: center; align-content: center; font-size: 25px; }.container ol li b{ color: #323232; }.container ol li:hover b{ color: #007eff; }.container.slider{ position:relative; height: 8px; width: 20%; background: #007eff; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BAsic HTML</title> <link rel="stylesheet" href="css/basic:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <ol> <div class="slider"></div> <li><b class="jee2">JEE Main Paper 2</b></li> <li><b class="nata">NATA - Maths</b></li> </ol> </div> </body></html>

Answer 1

With double border:双边框：

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; display: flex; background: #ff45 }.container{ height: fit-content; width: 100%; font-family: sans-serif; line-height: 80px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); }.container ol{ display: flex; list-style: none; }.container ol li{ height: 100%; width: 100%; text-align: center; align-content: center; font-size: 25px; border: 7px solid transparent; transition: border 0.3s ease; }.container ol li b{ color: #323232; transition: color 0.3s ease; }.container ol li:hover b{ color: #007eff; }.container ol li:hover { border-bottom-color: #007eff; border-top-color: #007eff; }.container.slider{ display: none; position: absolute; height: 8px; width: 20%; background: #007eff; transition: width 1s ease; }.container.slider li:hover { width: 50%; }

 <div class="container"> <ol> <div class="slider"></div> <li><b class="jee2">JEE Main Paper 2</b></li> <li><b class="nata">NATA - Maths</b></li> </ol> </div>

With animated slider:使用动画 slider：

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; display: flex; background: #ff45 }.container{ height: fit-content; width: 100%; font-family: sans-serif; line-height: 80px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); }.container ol{ display: flex; list-style: none; }.container ol li{ height: 100%; width: 100%; text-align: center; align-content: center; font-size: 25px; border: 7px solid transparent; transition: border 0.3s ease; }.container ol li b{ color: #323232; transition: color 0.3s ease; }.container ol li:hover b{ color: #007eff; }.container ol li:hover { border-bottom-color: #007eff; /*border-top-color: #007eff;*/ }.container ol.slider{ position: absolute; height: 7px; width: 0%; background: #007eff; transition: width 1s ease; }.container ol li:nth-of-type(1):hover ~.slider { width: 50%; }.container ol li:nth-of-type(2):hover ~.slider { width: 100%; }

 <div class="container"> <ol> <li><b class="jee2">JEE Main Paper 2</b></li> <li><b class="nata">NATA - Maths</b></li> <div class="slider"></div> </ol> </div>

Automate using JavaScript:使用 JavaScript 自动化：

Animate the slider for n-th child elements using JS.使用 JS 为第 n 个子元素设置动画 slider。

 var elements = document.querySelectorAll('li'); var totalElements = elements.length; var slider = document.querySelector('.slider'); elements.forEach((el, i) => { el.addEventListener('mouseenter', () => { slider.style.width = `${(100 / totalElements) * (i + 1)}%`; }); el.addEventListener('mouseleave', () => { slider.style.width = '0%'; }); });

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; display: flex; background: #ff45 }.container{ height: fit-content; width: 100%; font-family: sans-serif; line-height: 80px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); }.container ol{ display: flex; list-style: none; }.container ol li{ height: 100%; width: 100%; text-align: center; align-content: center; font-size: 25px; border: 7px solid transparent; transition: border 0.3s ease; }.container ol li b{ color: #323232; transition: color 0.3s ease; }.container ol li:hover b{ color: #007eff; }.container ol li:hover { border-bottom-color: #007eff; /*border-top-color: #007eff;*/ }.container ol.slider{ position: absolute; height: 7px; width: 0%; background: #007eff; transition: width 1s ease; } /*.container ol li:nth-of-type(1):hover ~.slider { width: 50%; }.container ol li:nth-of-type(2):hover ~.slider { width: 100%; }*/

 <div class="container"> <ol> <li><b class="jee2">JEE Main Paper 2</b></li> <li><b class="nata">NATA - Maths</b></li> <div class="slider"></div> </ol> </div>

Answer 2

You can use margin for position and include hover code to see the change您可以为 position 使用保证金并包含 hover 代码以查看更改

.container .slider{
    position:relative;
    height: 8px;
    width: 20%;
    background: #007eff;
    margin:45px;

}

.container .slider:hover{
    opacity:0.2;
}

Slider hover 底部彩条效果不工作

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-10-24 07:42:33

With double border:双边框：

With animated slider:使用动画 slider：

Automate using JavaScript:使用 JavaScript 自动化：

解决方案2
0 2020-10-24 08:58:27

Slider hover 底部彩条效果不工作

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-10-24 07:42:33

With double border:双边框：

With animated slider:使用动画 slider：

Automate using JavaScript:使用 JavaScript 自动化：

解决方案2 0 2020-10-24 08:58:27

解决方案1
1 已采纳 2020-10-24 07:42:33

解决方案2
0 2020-10-24 08:58:27