Kann Übergang nicht anwenden, um Skala zu transformieren

Ich arbeite zZ an einer Web site für ein lokales Geschäft, ich habe eine Menüleiste so weit, jedoch der Übergang, den ich auf die Umwandlung setze: Skala (1.2) funktioniert nicht, ich Stundenlang nach einer Lösung gesucht, aber vergebens. Von dem, was ich sammle, sollte mein Code völlig in Ordnung sein, aber der Übergang wird nicht gelten, wenn ich einfach die Größe ändern, ohne zu transformieren, verschiebt es die anderen Elemente um es herum, obwohl der Übergang so funktioniert, das Ergebnis sieht hässlich aus, das Menü ist voller Größe und reagiert noch nicht, also soll es nicht auf einem kleinen Bildschirm gut aussehen, hier ist mein Code.Kann Übergang nicht anwenden, um Skala zu transformieren

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title> 
     Pacific Cay 
    </title> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    </head> 
    <body> 
    <div class="container"> 
    <div class="menu"> 
    <ul> 
     <a href="#"><li class="about2">About Us</li></a> 
     <a href="#"><li>About Us</li></a> 
    <a href="home.html"><li id="logobox"><span id="hiddenoverlay">About us. 
    </span></li></a> 
    <a href="#"><li>About Us</li></a> 
    <a href="#"><li class="about">About Us</li></a> 
    </ul> 

    </div> 
</div> 
</body> 
</html> 



body 
{ 
background-image: url("banner.jpg"); 
background-repeat: no-repeat; 
background-size: cover; 
} 

ul 
{ 
list-style: none; 
padding: 5px; 
margin: 0px; 
padding-left: 3.3em; 
padding-top: 2em; 
} 

ul li 
{ 
margin-left: 0.7em; 
font-size: 55px; 
display: block; 
position: relative; 
float: left; 
border-top: 5px outset #3333ff; 
border-bottom: 5px outset #3333ff; 
border-radius: 20px; 
} 

li ul 
{ 
display: none; 
} 

ul a li 
{ 
display: block; 
padding: 5px 10px 5px 10px; 
text-decoration: none; 
white-space: nowrap;color: #fff; 
transition: transform 1s; 
transition: background-color 0.5s; 
transition: box-shadow 0.5s; 
box-shadow: 0px 0px 0px 0px #000000; 
} 

ul a li:hover 
{ 
transform: scale(1.2); 
box-shadow: 0px 10px 20px 0px #000000; 
background: #c0c0c0; 
} 

li:hover ul 
{ 
display: block; 
position: absolute; 
} 

li:hover li 
{ 
float: none; 
} 

a:hover li 
{ 
background: #f00; 
} 

li:hover a li:hover 
{ 
background: #000; 
} 

#drop-nav li ul li 
{ 
border-top: 0px; 
} 

.menu 
{ 
position: absolute; 
background: #7777ff; 
width: 100%; 
top: 0; 
left: 0; 
height: 10em; 
border-bottom: 1px outset #3333ff; 
} 

#logobox 
{ 
background-image: url("logo.png"); 
height: 1.7em; 
background-repeat: no-repeat; 
margin-top: -0.3em; 
font-size: 60px; 
} 

#hiddenoverlay 
{ 
opacity: 0; 
} 

.about2 
{ 
margin-left: -0.7em; 
} 

Here is a jsfiddle: https://jsfiddle.net/0k62nz1w/

Quelle

2017-04-16 Provision

Sie definieren mehrere Übergänge mit einem einzigen transition durch Komma getrennt. https://jsfiddle.net/0k62nz1w/1/

body { 
 
    background-image: url("banner.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 5px; 
 
    margin: 0px; 
 
    padding-left: 3.3em; 
 
    padding-top: 2em; 
 
} 
 

 
ul li { 
 
    margin-left: 0.7em; 
 
    font-size: 55px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    border-top: 5px outset #3333ff; 
 
    border-bottom: 5px outset #3333ff; 
 
    border-radius: 20px; 
 
} 
 

 
li ul { 
 
    display: none; 
 
} 
 

 
ul a li { 
 
    display: block; 
 
    padding: 5px 10px 5px 10px; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    color: #fff; 
 
    transition: transform 1s, background-color 0.5s, box-shadow 0.5s; 
 
    box-shadow: 0px 0px 0px 0px #000000; 
 
} 
 

 
ul a li:hover { 
 
    transform: scale(1.2); 
 
    box-shadow: 0px 10px 20px 0px #000000; 
 
    background: #c0c0c0; 
 
} 
 

 
li:hover ul { 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
li:hover li { 
 
    float: none; 
 
} 
 

 
a:hover li { 
 
    background: #f00; 
 
} 
 

 
li:hover a li:hover { 
 
    background: #000; 
 
} 
 

 
#drop-nav li ul li { 
 
    border-top: 0px; 
 
} 
 

 
.menu { 
 
    position: absolute; 
 
    background: #7777ff; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    height: 10em; 
 
    border-bottom: 1px outset #3333ff; 
 
} 
 

 
#logobox { 
 
    background-image: url("logo.png"); 
 
    height: 1.7em; 
 
    background-repeat: no-repeat; 
 
    margin-top: -0.3em; 
 
    font-size: 60px; 
 
} 
 

 
#hiddenoverlay { 
 
    opacity: 0; 
 
} 
 

 
.about2 { 
 
    margin-left: -0.7em; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title> 
 
     Pacific Cay 
 
    </title> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="menu"> 
 
     <ul> 
 
      <a href="#"> 
 
      <li class="about2">About Us</li> 
 
      </a> 
 
      <a href="#"> 
 
      <li>About Us</li> 
 
      </a> 
 
      <a href="home.html"> 
 
      <li id="logobox"><span id="hiddenoverlay">About us.</span></li> 
 
      </a> 
 
      <a href="#"> 
 
      <li>About Us</li> 
 
      </a> 
 
      <a href="#"> 
 
      <li class="about">About Us</li> 
 
      </a> 
 
     </ul> 
 

 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

Quelle

2017-04-16 03:03:33

Du bist eine Legende Kumpel, würde ich davon noch nie gedacht, danke – Provision

@Provision Sie sind willkommen. Achten Sie darauf, dies als Lösung auszuwählen, wenn das Problem gelöst wurde. –

Kann Übergang nicht anwenden, um Skala zu transformieren

Antwort

Verwandte Themen