마우스 스톱 시 나타나는 드롭다운 목록
11445 단어 HTMLjQueryJavaScriptCSS
★ jQuery 읽기.
★ 두 개의 test__categoryLink a 태그의 구문은 동일합니다.(이하 "링크"문구)
<div class="test" data-hoge-hoge="block"><span class="test__categoryLink"><a href="#" data-hoge-hoge="button">リンク</a></span>
<div class="test__categoryBlock" data-hoge-hoge="button">
<p class="test__categoryLink"><a href="#">リンク</a></p>
<ul class="test__categoryBlock__list">
<li><a href="#">リスト1</a></li>
<li><a href="#">リスト2</a></li>
<li><a href="#">リスト3</a></li>
</ul>
</div>
</div>
/* reset */
html,body,div,span,
p,img,ul,li {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
ul li {
list-style: none;
}
a {
margin: 0;
padding: 0;
background: transparent;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
color: #fd1e69;
}
a:hover {
color: #333;
}
.test {
position: relative;
margin: 40px;
}
.test .test__categoryLink a {
padding: 0 15px 0 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGBAMAAADj6an2AAAALVBMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaTgChpAAAAD3RSTlMA+/Psw7Oij1VDNSgKxCHshRGqAAAAKElEQVQI12MoYGAAYjEGBjYBhsYYnsAGBk6Vt5pAwcXCC4AktzcDAwBmDQW2A333EQAAAABJRU5ErkJggg==) right 6px no-repeat;
}
.test.on .test__categoryLink a {
padding: 0 15px 0 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAMAAAAmGUT3AAAAM1BMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZwOlLNAAAAEXRSTlMA++8HxEM1KLSzpKOQj1VUItzUG5EAAAAxSURBVAjXJcGHEQAhDASxPdvAB1L/1cKAxFaicGSTZbZkMcMSdL2OPxrod8A/0bjqAhPEALbnEC5FAAAAAElFTkSuQmCC) right 6px no-repeat;
}
.test .test__categoryBlock__list > li {
margin-bottom: 5px;
text-indent: -8px;
padding-left: 8px;
}
.test.on .test__categoryBlock__list a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHAQMAAAAVq36TAAAABlBMVEW/v78AS7E2lsyyAAAAAXRSTlMAQObYZgAAABJJREFUGBljbmBmAEMJZgPmBAAIngE+HFgy7QAAAABJRU5ErkJggg==) 0px 4px no-repeat;
padding: 0px 0px 0px 10px;
float: none;
}
.test.on .test__categoryBlock {
position: absolute;
top: -8px;
left: -12px;
display: block;
padding: 6px 10px 6px 10px;
border: 2px solid #67a5dd;
border-radius: 2px;
background-color: #fff;
}
.test.on .test__categoryBlock__list {
margin-top: 6px;
padding-top: 6px;
border-top: 1px dotted #bfbfbf;
}
.test .test__categoryBlock {
display: none;
}
$(function() {
$('[data-hoge-hoge="button"]').on('mouseenter mouseleave',function(){
$('[data-hoge-hoge="block"]').toggleClass('on');
});
});
이렇게 된 기분.
↓
움직이는 게 여기 있어요.
https://jsfiddle.net/Ricoliz/o3xo1mfj/3/embedded/result/
Reference
이 문제에 관하여(마우스 스톱 시 나타나는 드롭다운 목록), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rico/items/d8d47f69f9621687c995텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)