悬停后保持转换有效

时间：2015-02-03 07:35:14

标签： html css

当我将鼠标悬停在“Skate Night”字样上时，列表会显示转换，但是当我将鼠标移开文本时，我无法保持列表停留。

这就是我尝试过的。

<html>
 <head>
  <meta name="description" content="Skate Night is a community website by skaters, for skaters where you can share your content, get to know other skaters and enjoy what people have to share." />
  <title>
   Skate Night
  </title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
<body>
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<a class="menu" href="forums.html"><li>Forums</li></a>
<a class="menu" href="videos.html"><li>Videos</li></a>
<a class="menu" href="about.html"><li>About</li></a>
<a class="menu" href="team.html"><li>Join the team</li></a>
<a class="menu" href="login.html"><li>Login</li></a>
</div>
</body>
</html>

html
{
background-color: #ff4444;
}

#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}

#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}

#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}

.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}

#sn:hover ~ .menu
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}

任何帮助都会非常感谢，提前谢谢

4 个答案:

答案 0 :(得分：0)

你需要JavaScript（JS）

function snActive () {
  this.classList.add("active")
}
var sn = document.querySelector("#sn");
sn.addEventListener("mouseenter",snActive,false)
html
{
background-color: #ff4444;
}

#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}

#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}

#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}

.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}

#sn.active ~ .menu
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
<html>
 <head>
  <meta name="description" content="Skate Night is a community website by skaters, for skaters where you can share your content, get to know other skaters and enjoy what people have to share." />
  <title>
   Skate Night
  </title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
<body>
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<a class="menu" href="forums.html"><li>Forums</li></a>
<a class="menu" href="videos.html"><li>Videos</li></a>
<a class="menu" href="about.html"><li>About</li></a>
<a class="menu" href="team.html"><li>Join the team</li></a>
<a class="menu" href="login.html"><li>Login</li></a>
</div>
</body>
</html>

答案 1 :(得分：0)

可以使用纯css完成：

#header:hover #sn
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}

小提琴：http://jsfiddle.net/hprnxw8n/

答案 2 :(得分：0)

这里是用css，添加了一个新的div。你需要将li标签放在ul或ol中。

编辑我的回答，因为他们没有做任何事情，完全把李完了，我认为他们是造型但他们不是 

{
background-color: #ff4444;
}

#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}

#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}

#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}

.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}

#sn:hover ~ #submenu a
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
} 
#submenu:hover .menu
{transition-delay:all 0s;
font-size: 200%;
color: #009900;
  }
<div id="header"><a id="sn" href="home.html">Skate Night</a>
 <div id="submenu" >
<a class="menu" href="forums.html">Forums</a>
<a class="menu" href="videos.html">Videos</a>
<a class="menu" href="about.html">About</a>
<a class="menu" href="team.html">Join the team</a>
<a class="menu" href="login.html">Login</a>
</div></div>

答案 3 :(得分：0)

我将尝试使用CSS和一些HTML重构来尝试解决几个问题。首先，列出的项目不在列表中 - 这本身就已经在语义上不正确并且会导致问题。下面是我要使用的HTML：

<div id="header">
<a id="sn" href="home.html">Skate Night</a>
<ul>
    <li><a  href="forums.html">Forums</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="team.html">Join the team</a></li>
    <li><a href="login.html">Login</a></li>
</ul>
</div>

我已将列表项中的链接嵌套在中，并将它们添加到列表本身。这样可以实现准确的定位，因此我可以移除您的.menu类。我已经在前面说过，我没有完全复制你的造型，因为这不是这个答案的目的。目的是展示两个元素如何相互作用，样式只是一个细节。

现在，问题是我无法真正看到动画尝试做什么。但是，你可以聪明一点。如果您想要持久动画，可以将它应用于标题和列表。所以试试吧：

html {
  background-color: #ff4444;
}

#header{
    background-color: #000000;
    height: 20%;
    margin-left: -1%;
    margin-top: -1%;
    padding-top: 3%;
    width: 101.6%;
    box-shadow: 5px 10px 30px #009900;
    display: inline-block;
}

#sn{
    margin-left: 1%;
    margin-bottom: -1%;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 400%;
    box-shadow: 5px 10px 30px #009900;
    border-radius: 10px;
    transition: all 0.5s;
    transition-delay:all 9999999s;
}

/* Here I added some styling for you new list */
#header ul {
    display: inline-block;
}
#header ul li {
    display: inline-block;
    color: #000000;
    padding-left: 5%;
    transition: all 0.5s;
    text-decoration: none;
    /* The below is important to prevent hovers on the ul */
    list-style: none;
    overflow: hidden;
    height: 0;
}
#header ul li a {
    color: inherit;
}
/* Here is where the magic happens */
#header #sn:hover {
    color: #009900;
    box-shadow: 5px 10px 30px #e0e0e0;
}
#header #sn:hover + ul li,
#header ul:hover li {
    color: #009900;
}

只要你确保（例如使用填充）你的光标不会落在#sn和ul之间的间隙，那么悬停将适用于两者并保持应用直到您离开#sn或ul。您需要使用height: 0和overflow: hidden来阻止在上悬停在#sn之前发生的徘徊，否则这是在没有javascript的情况下执行此操作的方法。

＆＃13;
＆＃13; 
html {
  background-color: #ff4444;
}

#header{
  background-color: #000000;
  height: 20%;
  margin-left: -1%;
  margin-top: -1%;
  padding-top: 3%;
  width: 101.6%;
  box-shadow: 5px 10px 30px #009900;
  display: inline-block;
}

#sn{
  margin-left: 1%;
  margin-bottom: -1%;
  color: #e0e0e0;
  text-decoration: none;
  font-size: 400%;
  box-shadow: 5px 10px 30px #009900;
  border-radius: 10px;
  transition: all 0.5s;
  transition-delay:all 9999999s;
}

#header ul {
	display: inline-block;
}
#header ul li {
	display: inline-block;
	color: #000000;
	padding-left: 5%;
	transition: color 0.5s;
	text-decoration: none;
	list-style: none;
	overflow: hidden;
	height: 0;
}
#header ul li a {
	color: inherit;
}


#header #sn:hover {
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
#header #sn:hover + ul li,
#header ul:hover li {
	color: #009900;
	height: auto;
}
＆＃13; 
<div id="header">
<a id="sn" href="home.html">Skate Night</a>
<ul>
	<li><a  href="forums.html">Forums</a></li>
	<li><a href="videos.html">Videos</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="team.html">Join the team</a></li>
	<li><a href="login.html">Login</a></li>
</ul>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题