I understand almost nothing in the web, but I had to make a site for myself. I took a ready-made template based on bootstrap 5, on which I managed to implement everything I had conceived, but I cannot get rid of several problems with this:

1. If you select a tab, then click somewhere outside of all tabs, then when you hover over the active tab, it becomes hovered, which should not be. In general, I tried to repeat a similar component from here.
2. If you click on the description, then, while holding the mouse, move the cursor a little and release, then there will be two selected tabs.
3. On click (until you release the mouse), the title color turns light gray. It does not appear in the example from the link, but it is in the finished site. I would be grateful for information on how to fix it.

CodePudding user response：

If you select a tab, then click somewhere outside of all tabs, then when you hover over the active tab, it becomes hovered, which should not be. In general, I tried to repeat a similar component from here.

You need to apply the hover style to the .active tab as well:

.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover
 {
    color: #495057;
    background-color: #fff;
    border: none;
}

If you click on the description, then, while holding the mouse, move the cursor a little and release, then there will be two selected tabs.

Get rid of this rule. :focus is causing that behavior. You end up having one .active tab, and another that is :focused, and you have defined the same attributes for both.

/*
.dark .nav-tabs > li > a:focus {
    color: #495057;
    background-color: #fff;
}
*/

On click (until you release the mouse), the title color turns light gray. It does not appear in the example from the link, but it is in the finished site.

Can't test this one, but possibly also caused by the previously mentioned rule.