3
설명되지 않음 설명
지난 밤에 내가 발견 한 재미있는 코덱핀을 복제하려고했습니다. 내가 끝내고 나서, 나는 그것이 어떻게 작동했는지에 대해 매우 만족했다. 프로덕션 환경에서 사용하지 않을 계획 이었기 때문에 적절한 CSS 접두어를 사용하여 브라우저 간 호환성을 보장하지 않았습니다. 그러나 사파리와 파이어 폭스에서 확인하기로 결정했을 때, ": hover"이벤트가 제대로 변환되지 않았으며 지금까지 해결할 수 없었습니다. 나는이 프로젝트가 무엇이든 필요로하지는 않지만, 나는 이것이 미래의 개발에서이 이슈를 다룰 준비를 할 수 있도록 왜 이것이 일어나고 있는지를 이해하는데 도움을주고 싶다.선택기가 Chrome에서 Firefox 및 Safari로 제대로 변환되지 않습니다
직접 문제
파이어 폭스와 사파리에서, 때 크롬 그들이 밖으로 유지하는 반면, 그들은 붕괴은 "플라이 아웃"메뉴 헤더의 오른쪽에있는 메뉴 항목 위에 마우스를 올려 놓습니다.
대부분의 경우 "webkit"또는 "moz"접두어를 지정하지 않았기 때문에 왜 전환과 같은 특정 기능이 작동하지 않는지 이해하고 싶습니다. 그것은 단순히 나를 붕괴시키는 붕괴시키는 메뉴 일뿐입니다.
코드
ul.sidebar {
display: block;
position: absolute;
margin: 0;
left: 0;
height: 100%;
width: 6.5em;
background: #aa2266;
padding: 0;
text-align: center;
}
ul.sidebar * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul.sidebar a {
color: white;
text-decoration: none;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
ul.sidebar a > i {
margin-top: 0.13333em;
font-size: 2em;
display: block;
margin-bottom: 0.2em;
}
ul.sidebar a > span {
font-size: 0.8em;
font-family: sans-serif;
}
ul.sidebar li {
transition: background 0.3s;
background: #aa2266;
}
ul.sidebar > li {
margin: 0;
padding: 0;
height: 4em;
display: inline-block;
position: relative;
width: 100%;
background: #aa2266;
transition: background 0.3s;
}
ul.sidebar > li:hover {
background: #dc3278;
}
ul.sidebar > li:hover:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 6px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
transition: background 0.3s;
}
ul.sidebar > li > a:hover {
background: #ff5f87;
}
ul.sidebar > li > ul {
overflow: hidden;
height: 4em;
padding: 0;
position: absolute;
z-index: -1;
margin: 0;
color: red;
left: 100%;
transition-delay: 0.3s;
transition-property: transform;
transition-duration: 0.6s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: auto;
list-style: none;
white-space: nowrap;
top: 0;
background: #dc3278;
}
ul.sidebar > li > ul > li {
overflow: hidden;
background: none;
margin: 0 0px 0 -4px;
padding: 0;
display: inline-block;
width: 6.5em;
height: 4em;
transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
background: #fa648c;
}
ul.sidebar li:hover > ul {
-webkit-transform: translateX(0);
transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
color: white;
}
body {
padding: 0;
position: fixed;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #450f30;
}
description {
position: absolute;
bottom: 0;
right: 0;
padding: 0 0.4em 1em 0;
color: white;
font-size: 20px;
font-family: times new roman;
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
Full Stack Developer
</description>
<ul class="sidebar">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>
My Projects
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-question-circle"></i>
<span>Nothing</span>
</a>
</li>
<li>
<a>
<i class="fa fa-square"></i>
<span>Boxes for all</span>
</a>
</li>
<li>
<a>
<i class="fa fa-th-large"></i>
<span>More boxes</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-info-circle"></i>
<span>
About
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-eye"></i>
<span>I have eyes</span>
</a>
</li>
<li>
<a>
<i class="fa fa-bed"></i>
<span>and a bed</span>
</a>
</li>
<li>
<a>
<i class="fa fa-heartbeat"></i>
<span>plus cool icons</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-globe">
</i>
<span>
Links
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-external-link"></i>
<span>No Links</span>
</a>
</li>
<li>
<a>
<i class="fa fa-fire"></i>
<span>For the wicked</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-envelope-o"></i>
<span>
Contact
</span>
</a>
<ul>
<li>
<a href="mailto:[email protected]">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">[email protected]</span>
</a>
</li>
</ul>
</li>
</ul>
파이어 폭스가 인식하지 못하는 것처럼 보입니다. 번역 후에는 커서가 여전히 커서를 가리키고 있습니다. ul.sidebar를 추가하면 어떻게됩니까? li : hover> ul : hover {transform : translateX (0); }? – bobdye