0
나는 미친 듯이 나를 몰아왔다 지금은 여러 가지 방법을 시도해 왔습니다! 나는이 사이트 (http://alex-humphries.com/NC6/)에서 일해 왔으며, 마우스를 'Join the mailing list'위로 가져 가면 아래 내용이 확장됩니다. 이 작업을 클릭 한 번으로 토글하거나 다시 클릭 할 때까지 확장 상태로 유지하기를 원합니다 (본질적으로 마우스가 사라지면 내용이 사라지지 않도록해야합니다).마우스 클릭시 css 애니메이션 숨기기/표시
<!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 [email protected]</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입니다 : 다음은 HTML입니다
@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;
}
감사합니다!
예 :
코드를 제공해 주셔서 감사합니다.하지만 SSCCE (http://sscce.org/)를 제공하면 더 많은 도움을받을 수 있습니다. 모든 코드를 생략하십시오.이 코드는 질문과 관련이 없습니다! –
내 친구 당신은 가장 까다로운 호버 관련 질문 중 하나를 발견했습니다. 이 방법을 사용해보십시오. 내용 확장을 트리거 할 요소에 mouseover를 사용하고 현재 마우스 위치가 해당 내용이 아닌 경우 확장 된 내용을 숨기는 데 setTimeout을 사용합니다. –
그는 클릭 한 번으로 콘텐츠를 닫으려고하기 때문에 그렇게 복잡하지는 않습니다. 클릭 할 때 내용을 전환하거나 (내 대답 참조) 마우스 오버시 열어 클릭 할 때 닫을 수 있습니다. –