CSS hover on click

У меня есть список неупорядоченных html-меню в середине моей домашней страницы. Когда вы нажимаете на один из элементов, я хочу, чтобы он переместился в конечную левую и остался там. Однако код, который у меня есть, делает курсор меню слева при опрокидывании (не кликнуть), а затем меню возвращается в среднее исходное местоположение и не остается слева. Любая помощь?CSS hover on click

//jQuery 
 
$(".menu").on("click", function() { 
 
    $(".menu").addClass('permahover'); 
 
});

/*CSS*/ 
 
.menu{ 
 

 
    width:150px; 
 
    height: 350px; 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border-style:none; 
 
    transition: opacity .8s, width .8s ease-out; 
 
    -moz-transition: opacity .8s, width .8s ease-out; 
 
    -webkit-transition: opacity .8s, width .8s ease-out; 
 
    -o-transition: opacity .8s, width.8s ease-out; 
 
} 
 

 
.menu:hover, 
 
.permahover{ 
 
    opacity: 1; 
 
    width: 70%; 
 
}

<!--HTML--> 
 

 
<div id="menu" class="menu"> 
 
    <ul class="headlines"> 
 
    <li id="item1"onclick="checklist(this)">a</li> 
 
    <li id="item2">s </li> 
 
    <li id="item3">d </li> 
 
    <li id="item4">d </li> 
 
    <li id="item5">F </li> 
 
    <li id="item6">Ta </li> 
 
    <li id="item7">s </li> 
 
    </ul> 
 
</div>

источник

2015-06-10 mikeb

Так что оставляйте только '.permahover {' on '.menu: hover, .permahover {' line – Morpheus

Извините, я не понимал, что вы хотите от меня, я новичок в javascript – mikeb

Удалите '.menu : hover' из вашего CSS и оставить его как просто '.permahover' – Jay

Снимите .menu:hover с CSS, чтобы предотвратить его получение опрокидывание на парения Добавить файл Jquery, так что вы можете использовать функции JQuery

//jQuery 
 
$(".menu").on("click", function() { 
 
    $(".menu").addClass('permahover'); 
 
});

/*CSS*/ 
 
.menu{ 
 
    width:150px; 
 
height: 350px; 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0px; 
 
    right: 0; 
 
    margin: auto; 
 
    border-style:none; 
 
} 
 
    .menu li{ 
 
    position: relative; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0px; 
 
    right: 0; 
 
} 
 
#item7{ 
 
    transition: opacity .8s, left .8s ease-out; 
 
    -moz-transition: opacity .8s, left .8s ease-out; 
 
    -webkit-transition: opacity .8s, left .8s ease-out; 
 
    -o-transition: opacity .8s, left .8s ease-out; 
 
} 
 
#item6{ 
 
    transition: opacity 1s, left 1s ease-out; 
 
    -moz-transition: opacity 1s, left 1s ease-out; 
 
    -webkit-transition: opacity 1s, left 1s ease-out; 
 
    -o-transition: opacity 1s, left 1s ease-out; 
 
} 
 
#item5{ 
 
    transition: opacity 1.2s, left 1.2s ease-out; 
 
    -moz-transition: opacity 1.2s, left 1.2s ease-out; 
 
    -webkit-transition: opacity 1.2s, left 1.2s ease-out; 
 
    -o-transition: opacity 1.2s, left 1.2s ease-out; 
 
} 
 
#item4{ 
 
    transition: opacity 1.4s, left 1.4s ease-out; 
 
    -moz-transition: opacity 1.4s, left 1.4s ease-out; 
 
    -webkit-transition: opacity 1.4s, left 1.4s ease-out; 
 
    -o-transition: opacity 1.4s, left 1.4s ease-out; 
 
} 
 
#item3{ 
 
    transition: opacity 1.6s, left 1.6s ease-out; 
 
    -moz-transition: opacity 1.6s, left 1.6s ease-out; 
 
    -webkit-transition: opacity 1.6s, left 1.6s ease-out; 
 
    -o-transition: opacity 1.6s, left 1.6s ease-out; 
 
} 
 
#item2{ 
 
    transition: opacity 1.8s, left 1.8s ease-out; 
 
    -moz-transition: opacity 1.8s, left 1.8s ease-out; 
 
    -webkit-transition: opacity 1.8s, left 1.8s ease-out; 
 
    -o-transition: opacity 1.8s, left 1.8s ease-out; 
 
} 
 
#item1{ 
 
    transition: opacity 2s, left 2s ease-out; 
 
    -moz-transition: opacity 2s, left 2s ease-out; 
 
    -webkit-transition: opacity 2s, left 2s ease-out; 
 
    -o-transition: opacity 2s, left 2s ease-out; 
 
} 
 
.permahover li{ 
 
    opacity: 1; 
 
    left: -135%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!--HTML--> 
 

 
<div id="menu" class="menu"> 
 
    <ul class="headlines"> 
 
    <li id="item1"onclick="checklist(this)">a</li> 
 
    <li id="item2">s </li> 
 
    <li id="item3">d </li> 
 
    <li id="item4">d </li> 
 
    <li id="item5">F </li> 
 
    <li id="item6">Ta </li> 
 
    <li id="item7">s </li> 
 
    </ul> 
 
</div>

источник

2015-06-10 09:32:31

я удалил указанную строку в css. однако он не работает. Где именно я использую источник jquery? – mikeb

вы использовали jquery для события «click» ... поэтому вам нужно включить источник jquery в свой html, используя

Что-то вроде этого?

https://jsfiddle.net/qabf8ewa/1/

.menu:hover, 
.permahover { 
}

Этот селектор применяет класс по наведению, а не только по щелчку, как вы хотели

$("li").on("click", function() { 
    $(this).parent("ul").addClass('permahover'); 
});

источник

2015-06-10 09:32:47 Rob

проверить это demo

внесли некоторые изменения в коде CSS также

.menu{ 
    width:100%; 
    position: relative; 
    border-style:none; 

} 
.headlines{ 
    margin:0px auto; 
} 
.headlines li{ 
    width:150px; 
    margin:0px auto; 
    transition: opacity .8s, width .8s ease-out; 
    -moz-transition: opacity .8s, width .8s ease-out; 
    -webkit-transition: opacity .8s, width .8s ease-out; 
    -o-transition: opacity .8s, width.8s ease-out; 
    position:relative; 
} 

.permahover{ 
    opacity: 1; 
    width:100% !important; 


}

источник

2015-06-10 11:03:40

Смежные вопросы

CSS hover on click

ответ

Смежные вопросы