Question

我有关于转换的问题，我正在尝试使用转换创建自定义可折叠侧边栏。意想不到的是，只要图像悬停在上方就会出现#nav。但不知何故，这不起作用，请帮助。

    #menu{
    width: 1.75em;
    height: 1.75em;
    margin: 5px;
    float: left;
}

#title{
    color: rgba(0,0,0,0.50);
    margin: 0% 0% 0% 5%;
    font-size: 210%;
    float: left;
}

#nav{
    background-color: grey;
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

#menu:hover #nav{
    width: 50%;

function giveAlert(){
	alert("Your costum button works!");
}

/* Stylesheet voor Eric's meetcabine */
html, body{
    height: 100%;
    margin: 0%;
}
/* Opmaak voor Tablets */
@media screen and (max-width: 960px) and (max-height: 600px){
	#header{
		background: linear-gradient(white, gray);
		height: 7.5%;
	}
	
	#menu{
		width: 1.75em;
		height: 1.75em;
		margin: 5px;
		float: left;
	}
	
	#title{
		color: rgba(0,0,0,0.50);
		margin: 0% 0% 0% 5%;
		font-size: 210%;
		float: left;
	}
	
	#nav{
		background-color: grey;
		width: 1%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
		transition: width 2s;
	}
	
	#menu:hover  #nav{
		width: 50%;
	}
	#navigation{
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: grey;
	}
	li{
		display: inline;
	}
	li a{
		background-color: grey;
		color: rgba(0,0,0,0.50);
		display: block;
		padding: 8px;
		text-decoration: none;		/*To remove the blue onderlines*/
	}
	li a:hover{
		background-color: #607d8b;	/*Blue-grey from matterialize*/
	}

	#section{
		width: 100%;
		height: 88%;
	}
	#buttons{
		background-color: #f0f0f0;
		width: 100%;
		height: 50%;
	}
	#buttonlist{				/*da*/
		margin: 0;
		padding: 0;
	}
	#buttoncontainer{
		float: none;
		margin: 0;
		padding: 0;
	}
	#button{
		background-color: yellow;
		width: 20%;
		margin: 10px;
	}
	#button:hover{
		background-color: red;
		width: 20%;
		margin: 10px;
	}
	
	#graph{
		background-color: #fafafa;
		width: 100%;
		height: 50%;
	}
	
	#table{
		background-color: #f6f6f6;
		width: 100%;
		height: 100%;
	}
	
	#footer{
		background-color: grey;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}


/* Opmaak voor Desktops en Laptops en tablets*/
@media screen and (min-width: 960px) and (min-height: 600px){
	#header{
		background: linear-gradient(white, gray);
		height: 7.5%;
	}
	
	#title{
		color: rgba(0,0,0,0.50);
		margin: 0%;
		font-size: 375%;
	}
	
	#nav{
		background-color: grey;
	}
	
	#navigation{
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: grey;
	}
	li{
		float: left;
		display: inline;
	}
	li a{
		background-color: grey;
		color: rgba(0,0,0,0.50);
		display: block;
		padding: 8px;
		text-decoration: none;		/*To remove the blue onderlines*/
	}
	li a:hover{
		background-color: #607d8b;	/*Blue-grey from matterialize*/
	}

	#section{
		width: 100%;
		height: 88%;
	}
	#buttons{
		background-color: #f0f0f0;
		width: 50%;
		height: 50%;
		float: left;
	}
	#buttonlist{				/*da*/
		margin: 0;
		padding: 0;
	}
	#buttoncontainer{
		float: none;
		margin: 0;
		padding: 0;
	}
	#button{
		background-color: yellow;
		width: 20%;
		margin: 10px;
	}
	#button:hover{
		background-color: red;
		width: 20%;
		margin: 10px;
	}
	
	#graph{
		background-color: #fafafa;
		width: 50%;
		height: 50%;
		float: left;
	}
	
	#table{
		background-color: #f6f6f6;
		width: 50%;
		height: 100%;
		float: right;
	}
	
	#footer{
		background-color: grey;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}

<!DOCTYPE html>
<html lang="nl">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Eric's meetcabine</title>
	<link href="./favicon.ico" rel="icon" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	
	<div id="header">
		<img src="menu.png" id="menu">
		<h1 id="title">Eric's meetcabine</h1>

	</div>
	
	<div id="nav">
		<ul id="navigation">
			<li><a href="#home">Home</a></li>
			<li><a href="#meting">Meting</a></li>
			<li><a href="#help">Help</a></li>
		</ul>
	</div>
	
	<div id="section">
		<div id="buttons">
			<ul id="buttonlist">
				<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a></li>
				<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a></li>
				<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a></li>
			</ul>
		</div>
		<div id="table"></div>
		<div id="graph"></div>
	</div>
	
	<div id="footer"><center>&#169; Protonic</center></div>
</body>
</html>

P.S。对不起我糟糕的语言技巧，我来自荷兰。

Answer 1

检查下面，此代码是工作转换

＆＃13;

function giveAlert(){
	alert("Your costum button works!");
}

＆＃13;

/* Stylesheet voor Eric's meetcabine */
html, body{
    height: 100%;
    margin: 0%;
}
/* Opmaak voor Tablets */
@media screen and (max-width: 960px) and (max-height: 600px){
	#header{
		background: linear-gradient(white, gray);
		height: 7.5%;
	}
	
	#menu{
		width: 1.75em;
		height: 1.75em;
		margin: 5px;
		float: left;
	}
	
	#title{
		color: rgba(0,0,0,0.50);
		margin: 0% 0% 0% 5%;
		font-size: 210%;
		float: left;
	}
	#nav{
		background-color: grey;
		width: 100px;
		-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
		transition: width 2s;
	}
	#nav:hover{
		width: 500px;
	}
	#navigation{
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: grey;
	}
	li{
		display: inline;
	}
	li a{
		background-color: grey;
		color: rgba(0,0,0,0.50);
		display: block;
		padding: 8px;
		text-decoration: none;		/*To remove the blue onderlines*/
	}
	li a:hover{
		background-color: #607d8b;	/*Blue-grey from matterialize*/
	}

	#section{
		width: 100%;
		height: 88%;
	}
	#buttons{
		background-color: #f0f0f0;
		width: 100%;
		height: 50%;
	}
	#buttonlist{				/*da*/
		margin: 0;
		padding: 0;
	}
	#buttoncontainer{
		float: none;
		margin: 0;
		padding: 0;
	}
	#button{
		background-color: yellow;
		width: 20%;
		margin: 10px;
	}
	#button:hover{
		background-color: red;
		width: 20%;
		margin: 10px;
	}
	
	#graph{
		background-color: #fafafa;
		width: 100%;
		height: 50%;
	}
	
	#table{
		background-color: #f6f6f6;
		width: 100%;
		height: 100%;
	}
	
	#footer{
		background-color: grey;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}


/* Opmaak voor Desktops en Laptops en tablets*/
@media screen and (min-width: 960px) and (min-height: 600px){
	#header{
		background: linear-gradient(white, gray);
		height: 7.5%;
	}
	
	#title{
		color: rgba(0,0,0,0.50);
		margin: 0%;
		font-size: 375%;
	}
	
	#nav{
		background-color: grey;
	}
	
	#navigation{
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: grey;
	}
	li{
		float: left;
		display: inline;
	}
	li a{
		background-color: grey;
		color: rgba(0,0,0,0.50);
		display: block;
		padding: 8px;
		text-decoration: none;		/*To remove the blue onderlines*/
	}
	li a:hover{
		background-color: #607d8b;	/*Blue-grey from matterialize*/
	}

	#section{
		width: 100%;
		height: 88%;
	}
	#buttons{
		background-color: #f0f0f0;
		width: 50%;
		height: 50%;
		float: left;
	}
	#buttonlist{				/*da*/
		margin: 0;
		padding: 0;
	}
	#buttoncontainer{
		float: none;
		margin: 0;
		padding: 0;
	}
	#button{
		background-color: yellow;
		width: 20%;
		margin: 10px;
	}
	#button:hover{
		background-color: red;
		width: 20%;
		margin: 10px;
	}
	
	#graph{
		background-color: #fafafa;
		width: 50%;
		height: 50%;
		float: left;
	}
	
	#table{
		background-color: #f6f6f6;
		width: 50%;
		height: 100%;
		float: right;
	}
	
	#footer{
		background-color: grey;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}

＆＃13;

<!DOCTYPE html>
<html lang="nl">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Eric's meetcabine</title>
	<link href="./favicon.ico" rel="icon" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	
	<div id="header">
		<img src="menu.png" id="menu">
		<h1 id="title">Eric's meetcabine</h1>

	</div>
	
	<div id="nav">
		<ul id="navigation">
			<li><a href="#home">Home</a></li>
			<li><a href="#meting">Meting</a></li>
			<li><a href="#help">Help</a></li>
		</ul>
	</div>
	
	<div id="section">
		<div id="buttons">
			<ul id="buttonlist">
				<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a></li>
				<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a></li>
				<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a></li>
			</ul>
		</div>
		<div id="table"></div>
		<div id="graph"></div>
	</div>
	
	<div id="footer"><center>&#169; Protonic</center></div>
</body>
</html>

＆＃13;

Answer 2

这样做了，我也将#nav{ top:0; }更改为#nav{ top:27px; }，以避免#nav部分展开时会覆盖#menu切换和“悬停”效果的问题不会制作古怪的动画。

同时将此选择器#menu:hover ~ #nav更改为此#menu:hover ~ #nav, #nav:hover，以便当您将远离从#nav转移到#menu时，#nav部分将保持展开状态#nav { /* code */ top: 27px; /* code */ } #menu:hover ~ #nav, #nav:hover{ width: 50%; }部分，不会转换回原始宽度。

JS Fiddle-updated

<强> CSS：

<div id="header">
  <img src="menu.png" id="menu">
  <h1 id="title">Eric's meetcabine</h1>

  <div id="nav">
    <ul id="navigation">
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#meting">Meting</a>
      </li>
      <li><a href="#help">Help</a>
      </li>
    </ul>
  </div>
</div>

<强> HTML：

function giveAlert() {
  alert("Your costum button works!");
}

完整代码：

/* Stylesheet voor Eric's meetcabine */

html,
body {
  height: 100%;
  margin: 0%;
}
/* Opmaak voor Tablets */

@media screen and (max-width: 960px) and (max-height: 600px) {
  #header {
    background: linear-gradient(white, gray);
    height: 7.5%;
  }
  #menu {
    width: 25px;
    height: 25px;
    margin: 5px;
    display: inline-block;
    z-index: 10;
    cursor: pointer;
  }
  #title {
    color: rgba(0, 0, 0, 0.50);
    margin: 0% 0% 0% 5%;
    font-size: 210%;
    display: inline-block;
  }
  #nav {
    background-color: grey;
    width: 1%;
    height: 100%;
    position: absolute;
    top: 27px;
    left: 0;
    z-index: 1;
    -webkit-transition: width 2s;
    /* For Safari 3.1 to 6.0 */
    transition: width 2s;
  }
  #menu:hover ~ #nav,
  #nav:hover {
    width: 50%;
  }
  #navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: grey;
  }
  li {
    display: inline;
  }
  li a {
    background-color: grey;
    color: rgba(0, 0, 0, 0.50);
    display: block;
    padding: 8px;
    text-decoration: none;
    /*To remove the blue onderlines*/
  }
  li a:hover {
    background-color: #607d8b;
    /*Blue-grey from matterialize*/
  }
  #section {
    width: 100%;
    height: 88%;
  }
  #buttons {
    background-color: #f0f0f0;
    width: 100%;
    height: 50%;
  }
  #buttonlist {
    /*da*/
    margin: 0;
    padding: 0;
  }
  #buttoncontainer {
    float: none;
    margin: 0;
    padding: 0;
  }
  #button {
    background-color: yellow;
    width: 20%;
    margin: 10px;
  }
  #button:hover {
    background-color: red;
    width: 20%;
    margin: 10px;
  }
  #graph {
    background-color: #fafafa;
    width: 100%;
    height: 50%;
  }
  #table {
    background-color: #f6f6f6;
    width: 100%;
    height: 100%;
  }
  #footer {
    background-color: grey;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
/* Opmaak voor Desktops en Laptops en tablets*/

@media screen and (min-width: 960px) and (min-height: 600px) {
  #header {
    background: linear-gradient(white, gray);
    height: 7.5%;
  }
  #title {
    color: rgba(0, 0, 0, 0.50);
    margin: 0%;
    font-size: 375%;
  }
  #nav {
    background-color: grey;
  }
  #navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: grey;
  }
  li {
    float: left;
    display: inline;
  }
  li a {
    background-color: grey;
    color: rgba(0, 0, 0, 0.50);
    display: block;
    padding: 8px;
    text-decoration: none;
    /*To remove the blue onderlines*/
  }
  li a:hover {
    background-color: #607d8b;
    /*Blue-grey from matterialize*/
  }
  #section {
    width: 100%;
    height: 88%;
  }
  #buttons {
    background-color: #f0f0f0;
    width: 50%;
    height: 50%;
    float: left;
  }
  #buttonlist {
    /*da*/
    margin: 0;
    padding: 0;
  }
  #buttoncontainer {
    float: none;
    margin: 0;
    padding: 0;
  }
  #button {
    background-color: yellow;
    width: 20%;
    margin: 10px;
  }
  #button:hover {
    background-color: red;
    width: 20%;
    margin: 10px;
  }
  #graph {
    background-color: #fafafa;
    width: 50%;
    height: 50%;
    float: left;
  }
  #table {
    background-color: #f6f6f6;
    width: 50%;
    height: 100%;
    float: right;
  }
  #footer {
    background-color: grey;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

<div id="header">
  <img src="menu.png" id="menu">
  <h1 id="title">Eric's meetcabine</h1>

  <div id="nav">
    <ul id="navigation">
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#meting">Meting</a>
      </li>
      <li><a href="#help">Help</a>
      </li>
    </ul>
  </div>
</div>

<div id="section">
  <div id="buttons">
    <ul id="buttonlist">
      <li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a>
      </li>
      <li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a>
      </li>
      <li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a>
      </li>
    </ul>
  </div>
  <div id="table"></div>
  <div id="graph"></div>
</div>

<div id="footer">
  <center>&#169; Protonic</center>
</div>

 <system.webServer>
    <httpErrors existingResponse="PassThrough"/>
 </system.webServer>

过渡不起作用

2 个答案: