Как сверстать эффект при наведении?

Question

[Semmy_99]

Ребят подскажите как сверстать такой эффект при наведении как ЗДЕСЬ,Т.Е. при наведении появляется какой то блок но не пропадает если убрать мшку с элемента ховер. ?

Если будет наглядный пример было бы здорово.

Answer 1

[Анастасия Панфилова]

уродский пример:
https://codepen.io/nemarta/pen/PjweZg

но тут видно, что можно справиться без вмешательства js
зачем писать скрипт, когда можно написать пару строк стилей (строки 29-32)
не знаю насколько это правильно, но я предпочитаю такой способ )

Answer 2

[Сергей Тутуков]

Код с сайта:

$(".start-page .slider .dir li").mouseover(function() {
            if (!$(this).hasClass("selected")) {
                var m = $(".start-page .slider .dir li");
                m.removeClass("selected");
                $(this).addClass("selected");
                var l = $(".start-page .slider .content li");
                l.removeClass("selected");
                $(l.get(m.index($(this)))).addClass("selected")
            }
        });

Но лучше:

$(".start-page .slider .dir li").on('mouseover touchstart', function(){
    var tab = $(this),
        tabContainer = $(".start-page .slider .content li");
    if (!tab.hasClass("selected")) {
        tab.addClass("selected").siblings().removeClass("selected");
        tabContainer.eq($(this).index()).addClass('selected').siblings().removeClass("selected");
    }
});

А вообще по дата-атрибутам обращался к нужному контенту.