一段时间以来，我一直在尝试各种方法，这让我发疯了!我一直在这个站点 (http://alex-humphries.com/NC6/) 上工作，并已将其设置为当您将鼠标悬停在“加入邮件列表”上时，下面的内容会展开。我希望它可以在单击时切换，或者保持展开状态直到再次单击(本质上，我不希望鼠标离开时内容消失)。这是 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nina</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.stratus({
links: 'http://soundcloud.com/ninaschofield/drifting',
theme: 'http://stratus.sc/themes/dark.css',
auto_play: false,
color : '805ffa'
});
});
</script>
<style type="text/css">
body,td,th {
font-family: Quicksand, Serif;
color: #FFF;
size: 0.7em;
}
h1 {
text-shadow: 1px 1px 3px #aaa;
font-family: "QuicksandBold", serif
font-size:1.2em;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
p.style5 {font: 18px/27px 'QuicksandBold', Arial, sans-serif;}
p.style4 {font: 24px/27px 'QuicksandLight', Arial, sans-serif;}
p.style3 {font: 14px/27px 'QuicksandBook', Arial, sans-serif;}
p.style6 {font: 24px/27px 'QuicksandB', Arial, sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9C6CD7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body bgcolor="#000000" onload="MM_preloadImages('images/fbookmo.png','images/twittermo.png','images/youtubemo.png','images/soundcloudmo.png')"> <div id="social"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/fbookmo.png',1)"> <img src="images/fbook.png" width="49" height="49" id="facebook" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','images/twittermo.png',1)"> <img src="images/twitter.png" alt="Twitter" width="49" height="49" id="Twitter" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YouTube','','images/youtubemo.png',1)"><img src="images/youtube.png" alt="YouTube" width="49" height="49" id="YouTube" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Soundcloud','','images/soundcloudmo.png',1)"><img src="images/soundcloud.png" alt="Soundcloud" width="49" height="49" id="Soundcloud" /></a></div><div id="nina"></div>
<div id="video"><iframe width="420" height="240" src="http://www.youtube.com/embed/zCCYZuqizns" frameborder="0" allowfullscreen></iframe></div>
<div id="text">To mix thoughtful and catchy songs with a uniquely arresting voice and breathtaking beauty is a classic recipe for pop success. But at 21, singer/songwriter Nina has also shown a mature determination to achieve an international career.
</br></br>
Classically trained and having successfully completed a Degree in Vocal Performance at the Academy of Contemporary Music she has done a great deal of professional work to widespread acclaim. Known as a singer from her early years she has performed in public since the age of 16. In 2007 Nina was invited to perform at the Montreux Jazz Festival, sharing the bill with the likes of Tori Amos, Seal, Sly and The Family Stone, Jeff Beck, Beastie Boys and Ben's Brother. Since then, she has continued to perform live as well as working closely with internationally noted Producer Richard Niles (Sir Paul McCartney, Ray Charles, Mariah Carey, Kylie Minogue, Westlife, Tom Jones) with whom she has already produced two singles. She has worked in collaboration with musicians such as Richard Cottle (David Bowie, Seal, Tina Turner), the famous photographer Angelo Valentino (Kate Moss, Naomi Campbell, Usher) and one of America's hottest designers, Arianna Power (Kayne West, Estelle, Metro Station).
</br></br>
As well as supporting John Power (The La's/Cast) on two occasions, she has taken part in the semi-finals of the BBC Radio 2 Young Folk Awards 2008/9. Radio airplay includes coverage by stations such as BFBS, and, in addition to recorded plays, live studio performances for BBC Southern Counties Radio on South Live (syndicated across the southern counties), BBC Solent Radio, Hampshire and Guildford University Radio, Surrey. As well as interviews on local TV, Nina has made appearances on BBC 2's show "Genius" and on Channel 5 for their "Don't Stop Believing" advert.
</br></br>
Nina's recent release "Slow Down Soldier" in aid of Help For Heroes reached number 4 in the UK iTunes Singer/Songwriter chart, receiving extensive radio airplay and TV coverage. As well as supporting the forces, she is a proud ambassador for The Rose Road Association.
</br></br>
Currently working with producers and writers in Los Angeles, Switzerland, Germany and the UK, Nina looks forward to releasing new material at the end of 2012 and performing across the country.</div>
<div id="scloud"></div>
<div id="mailing"><div class="menu-item"><p class="style4">JOIN THE MAILING LIST</h1></p>
<ul>
<li>
Sign up today to get an free track
<p></br></br>
<strong>Name</strong>
<input name="name" type="text" size="30" maxlength="30" />
Email <input name="name" type="text" size="30" maxlength="30" />
<a href="#" class="classname">Sign Up</a></p></br></p></br></br></li></ul></div>
<p class="style4"> </p>
<div class="menu-item3"> <p class="style4">CONTACT NINA</p>
<ul>
<li>
If you wish to contact Nina, please email her at contact@Ninaschofield.com</li></ul></div>
<p class="style4"> </p>
<div class="menu-item4"> <p class="style4">VISIT THE BLOG</p>
<ul><li>
You can see what Nina is up to on her blog here</li></ul></div>
<p class="style4"> </p>
<div class="menu-item2"> <p class="style6">NEW SINGLE: COLOURS OF THE WORLD</p>
<ul><li>
New single out now, listen <a href="http://soundcloud.com" target="new" class="white"><font color="#99CCFF" face="Quicksand">here</font></a>, or thorugh the soundcloud player below</li></ul></div></div>
</nav>
<img alt="full screen background image" src="images/bground.jpg" id="full-screen-background-image" />
<div id="wrapper">
</div> <div id="credits">©2012 Nina Schofield. Design by <a href="http://alex-humphries.com" target="new"><font color="#FFFFFF" size="+2">Alex Humphries</font></a></div>
</body>
</html>
这是 CSS:
@charset "UTF-8";
@font-face {
font-family: 'QuicksandLight';
src: url('Quicksand-fontfacekit/Quicksand_Light-webfont.eot');
src: url('Quicksand-fontfacekit/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Quicksand-fontfacekit/Quicksand-fontfacekitQuicksand_Light-webfont.woff') format('woff'),
url('Quicksand-fontfacekit/Quicksand_Light-webfont.ttf') format('truetype'),
url('Quicksand-fontfacekit/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'QuicksandBook';
src: url('Quicksand-fontfacekit/Quicksand_Book-webfont.eot');
src: url('Quicksand-fontfacekit/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('Quicksand-fontfacekit/Quicksand_Book-webfont.woff') format('woff'),
url('Quicksand-fontfacekit/Quicksand_Book-webfont.ttf') format('truetype'),
url('Quicksand-fontfacekit/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'QuicksandBold';
src: url('Quicksand-fontfacekit/Quicksand_Bold-webfont.eot');
src: url('Quicksand-fontfacekit/Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Quicksand-fontfacekit/Quicksand_Bold-webfont.woff') format('woff'),
url('Quicksand-fontfacekit/Quicksand_Bold-webfont.ttf') format('truetype'),
url('Quicksand-fontfacekit/Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
font-weight: normal;
font-style: normal;
}
html, body {
height: 80%;
width: 100%;
padding: 0;
margin: 0;
}
#nina {
background-image: url(images/nina.png);
height: 53px;
width: 418px;
position: absolute;
top: 40px;
right: 50px;
}
#social {
height: 51px;
width: 237px;
position: absolute;
top: 40px;
right: 500px;
}
#video {
height: 241px;
width: 420px;
position: absolute;
top: 130px;
right: 50px;
}
#text {
font-family: 'QuicksandBook', serif;
font-weight:400;
font-size: 1em;
height: 240px;
padding-right:5px;
width: 25%;
color: #FFF;
position: absolute;
top: 130px;
right: 490px;
overflow:scroll;
overflow-x: hidden;
z-index:4;
background-color:rgba(0,0,0,0.5);
border-radius:5px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(4,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(4,0,0,0.5);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9C6CD7));
}
#scloud {
position:absolute;
left:10px;
bottom:50px;
width:50%;
font-family: 'QuicksandLight', serif;
font-size: 1.9em;
color:#FFF;
text-align:left;
}
#mailing {
width: 70%;
height:50px;
position:absolute;
right:42px;
bottom:35%;
text-align:right;
font-family: 'QuicksandLight', serif;
font-size: 0.9em;
font-weight:200;
}
.menu-item ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 93px;
}
.menu-item2 ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item2:hover ul {
height: 40px;
}
.menu-item3 ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item3:hover ul {
height: 40px;
}
.menu-item4 ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item4:hover ul {
height: 40px;
}
#credits {
height:auto;
width:auto;
position:absolute;
left:5px;
bottom:35px;
font-size:0.7em;
color:#FFF;
font-family:'QuicksandLight', serif;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 400px;
width: 100%;
height: auto;
position: fixed;
background-attachment:fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
padding:2px 20px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}
.classname:white {
color:#FFF
}
#iplayer {
position:absolute;
bottom:0px;
width:100%;
}
element.style {
visibility:visible;
}
#stratus iframe {
visibility:hidden;
}
stratus.css (line 3)
#stratus, #stratus iframe {
height:32px;
width:100%;
}
stratus.css (line 2)
::selection, *::-moz-selection, *::-webkit-selection {
background-color:#FF6600;
background-position:initial initial;
background-repeat:initial initial;
color:#FFFFFF;
}
application.css
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0;
font-family:'QuicksandLight';
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}
谢谢!
最佳答案
这是来自 jQuery API 的示例:
示例:切换所有段落。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
根据您的代码进行调整，它应该是这样的:
$("#join").click(function () {
$("#form").toggle();
});
鉴于您的链接应具有 ID join 并且注册表格应具有 ID form
如果你想要一个滑动的动画开关，你可以使用slideToggle()相反:
$("#join").click(function () {
$("#form").slideToggle("slow");
});
关于css - 单击鼠标隐藏/显示 css 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14157513/