 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
SebastianACS
Threadersteller
Dabei seit: 04.02.2012
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Sa 24.11.2012 14:30
Titel [CSS3] Problem: transition durch :hover 'hakt' |
  |
|
Hallo 
Ich bin bei CSS3 Transitions auf ein Problem gestoßen:
Die Buttons bewegen sich bei :hover, also wenn die Maus darüber schwebt.
Dadurch bewegen sie sich unter der Maus weg -> :hover event ist nicht mehr erfüllt, also bewegen sie sich wieder zurück.
Da ist wieder die Maus, also: hin, her, hin, her, bis einem dusslig wird.
Die korrekte Funkrion erreicht man nur, wenn man die Maus exakt mittig auf dem Button platziert.
Dabei habe ich extra den ganzen Umfassenden Link "<a>" als :hover-element gewählt, damit es sowohl bei Maus auf Button, als auch bei Maus auf Text/Bild im Button funktioniert.
>Der Link zum Problem ist hier<
Kann mir da irgendjemand auf die Sprünge helfen?
Ich versteh grad einfach nicht, wie ich das beheben kann 
Mein HTML:
| Code: | <header>
<br />
<h2>Pixeltropfen.de | Sebastian Schuster</h2>
<div id="topnavi">
</div>
<div id="kontakt-bar">
<a href="http://de-de.facebook.com/"><div class="button facebook"><p>facebook</p></div></a>
<!-- <a href="http://de.linkedin.com/"><div class="button linkedin"><p>in</p></div></a> -->
<a href="http://www.xing.com/"><div class="button xing"><p>Xing</p></div></a>
<a href="http://maple.libertreeproject.org/login"><div class="button libertree"><p>Libertree</p></div></a>
<a href="mailto:sebispam@yahoo.de"><div class="button email"><img src="./bilder/mail.png" alt="" title="" /></div></a>
</div>
</header> |
Mein aufs wichtigste reduziertes CSS:
| Code: |
.button {
display: inline-block;
width: auto;
height: 35px;
border: 1px solid #FFF;
padding: 3px 1em 0 1em;
line-height:250%;
text-align: center;
position: relative;
top: -1em;
-moz-box-shadow: 0 0 3px #FFF;
-webkit-box-shadow: 0 0 3px #FFF;
box-shadow: 0 0 3px #FFF;
}
.button:hover {
-moz-box-shadow: inset 0 0 10px #FFF;
-webkit-box-shadow: inset 0 0 10px #FFF;
box-shadow: inset 0 0 10px #FFF;
}
.facebook {
background: #3d95e2; /* Old browsers */
background: -moz-linear-gradient(top, #3d95e2 0%, #0034a5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d95e2), color-stop(100%,#0034a5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3d95e2 0%,#0034a5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3d95e2 0%,#0034a5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3d95e2 0%,#0034a5 100%); /* IE10+ */
background: linear-gradient(to bottom, #3d95e2 0%,#0034a5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d95e2', endColorstr='#0034a5',GradientType=0 ); /* IE6-9 */
}
.linkedin {
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
.xing {
background: #2ce0b6; /* Old browsers */
background: -moz-linear-gradient(top, #2ce0b6 0%, #15b25c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ce0b6), color-stop(100%,#15b25c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2ce0b6 0%,#15b25c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2ce0b6 0%,#15b25c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2ce0b6 0%,#15b25c 100%); /* IE10+ */
background: linear-gradient(to bottom, #2ce0b6 0%,#15b25c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ce0b6', endColorstr='#15b25c',GradientType=0 ); /* IE6-9 */
}
.libertree {
background: #d2ff52; /* Old browsers */
background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* IE10+ */
background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
}
.email {
padding: none;
background: #f9c667; /* Old browsers */
background: -moz-linear-gradient(top, #f9c667 0%, #f79621 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9c667), color-stop(100%,#f79621)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9c667 0%,#f79621 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9c667 0%,#f79621 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9c667 0%,#f79621 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9c667 0%,#f79621 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 ); /* IE6-9 */
}
.email img {
position: relative;
top: 4px;
}
header .button, .email img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.email:hover > img {
-webkit-transform: rotate(360deg) scale(1.9);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
header a:hover > .button {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* ~ENDE~ */
header p {
font-size: 130%;
color: #FFF;
text-shadow: 0 -1px 3px #333,
0 1px 2px #DDD;
font-family: 'Comic Sans MS', 'Ubuntu', Geramond;
}
header p:hover {
text-shadow: 0 0 0.25em #FFF;
}
header .email {
margin-left: 2em;
} |
|
|
| |
  |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Sa 24.11.2012 15:13
Titel
|
|
|
Das liegt daran, dass der umschließende Link nicht so groß ist wie das darinnen liegende div. Ein Link ist per se ein inline Element und nicht zwingend so groß wie der darin befindliche Inhalt. Auch wenn es in HTML5 erlaubt ist um "alles" einen Link zu legen, so ist es trotzdem ohne entsprechendes Styling noch immer kein Container.
Wenn du den Links ebenfalls ein display: inline-block; gibst ( header a { display: inline-block; }, dann sollte das Problem sich erledigt haben.
|
|
| |
|
|
|
Anzeige
|
|
|
SebastianACS
Threadersteller
Dabei seit: 04.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 24.11.2012 15:24
Titel
|
|
|
Tatsächlich!
So was in die Richtung habe ich schon vermutet, aber nicht lösen können.
Vielen Dank für die Antwort
Zuletzt bearbeitet von SebastianACS am Sa 24.11.2012 15:30, insgesamt 1-mal bearbeitet
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Sa 24.11.2012 16:17
Titel
|
|
|
|
Oder Du lässt den hirnlosen Effekt einfach weg. SO ein Quatsch braucht sowieso kein Mensch.
|
|
| |
|
|
SebastianACS
Threadersteller
Dabei seit: 04.02.2012
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst So 25.11.2012 21:55
Titel
|
|
|
| Zitat: | | Vielen Dank für deinen qualifizierten, höflichen Kommentar *Thumbs up!* |
Auch wenn Deine Zappelgifs mit CSS3 gemacht sind, nen optischen Mehrwert gegenüber bspw. nem farbigen Hintergrund bieten sie jedenfalls nicht. Dafür verschlechtern sie die Usability und hinterlassen den faden Nachgeschmack der 90er Jahre. Und ich meine damit nicht die coolen Retro-Old-School-Neunziger...
Konstruktiv genug?
|
|
| |
|
|
SebastianACS
Threadersteller
Dabei seit: 04.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 25.11.2012 23:20
Titel
|
|
|
Immer noch nicht wirklich freundlich, aber durchaus eine ernstzunehmende Kritik, mit der ich auch was Anfangen kann.
Ich persönlich finde schon, dass da ein optischer Mehrwert da ist.
Dass Du das anders siehst, kann ich akzeptieren.
Ich weiß, dass es 2 Seiten der Medaille gibt:
- Einerseits verbessert optisches Feedback die Usability
- Andererseits kann übertrieben quietschiges Feedback sie auch verschlechtern
Wenn meine Site fast fertig ist, guck ich nochmal drüber, inwiefern im gesamten Zusammenspiel welche Effekte nötig oder unnötig sind.
Danke für deine Rückmeldung (diesmal keine Ironie!)
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mo 26.11.2012 01:55
Titel
|
|
|
Eine Beschriftung, die auf dem Kopf steht, verschlechtert die Usability definitiv. Und wie gesagt - ein farbiger Background ist auch ein optisches Feedback. Ganz ohne Zappeleffekte. Ganz ohne Wartezeiten. Ganz ohne ellenlange CSS-Wände voller vendorspezifischer Transistions und Fallbacks. Und auch ganz ohne Probleme in der Render/Eventlogik, wie sie Auslöser dieses Threads ist.
Zuletzt bearbeitet von pantonine am Mo 26.11.2012 01:56, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[TUT] - CSS3 Techniken Transform - Transition - Animate
hover befehl: mit transition und verlauf möglich?
CSS3 image hover
Problem mit li:hover
CSS - Problem mit Hover-Effekt
HTML a:hover Problem
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
