Im responsiv Web-Design - img:hover Effekt ausschalten

Seepferdchen · 31. März 2016

Hey,

ich hab ein Problem beim Umstellen auf Responsiv-WEB-Design:

im CSS habe ich folgenden Befehl gesetzt:

CSS

img:hover {/*Bilder werden größer dargestellt, wenn man mit der Maus darüber fährt */
    border-radius: 8px;
    -moz-box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
    box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -moz-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
    -webkit-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
    -ms-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
    -o-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
    transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
    z-index: 2;
}

Alles anzeigen

Diesen habe ich versucht wie folgt im CSS nach dem Breakpoint wieder auszuschalten:

CSS

@media only screen and ( max-width: 56.25em ) {




    header {
        background-image: url(1_logos/Banner.png);
        height: 120px;
        background-size: 100%;
        background-position: left top;
        background-repeat: no-repeat;
    }

    #wrapper {
        width: 100% !important;
        background-image: none;
                border-left: 0;
        border-right: 0;		
    }




    body {
        background-image: none;
        background-color: white;
    }	

    #steuerung {
        display: none;
    }

    article {
        margin: 1em 2em;
    }	

    .img:hover {
        transform: none;
        box-shadow: none:
    }

Alles anzeigen

nur leider Klappt es nicht! Wer kann mir einen Rat geben?

Basi · 31. März 2016

Hey,

hast du den Codeblock (die geschwiften Klammern) aus Zeile 1 wieder geschlossen?

Außerdem sehe ich in Zeile 33 nach dem "none" einen Doppelpunkt statt dem Semikolon.

In welcher Reihenfolge steht der Code in deinen Dokumenten?

Falls dein Problem noch nicht gelöst ist, zeig am Besten deinen ganzen CSS Code, damit wir auf Fehlersuche gehen können.

Mit welchem Editor bearbeitest du dein HTML und CSS? So ein Syntaxfehler wie der Doppelpunkt statt dem Semikolon wird von brauchbaren Editoren direkt hervorgehoben, damit man ihn beseitigen kann.

Seepferdchen · 31. März 2016

Hey Basi,
Du bist ja wirklich eine liebe Seele!

Früher habe ich Webcon Scriptly als Editor benutzt, jetzt Brackets, war der Vorschlag von Axel Pratzner in den Lehrvideos.
Ist zwar erst mal eine Umstellung, finde Brackets aber jetzt auch vorteilhafter!
Den Doppelpunkt hatte ich tatsächlich übersehen, wurde allerdings auch nicht als Fehler angezeigt!

Den Fehler konnte ich leider bisher nicht finden.
Hier nun mein komplettes CSS:

CSS

* {
    padding: 0;
    margin: 0;
}




html, body {
    font-family: arial, sans-serif;
    font-size: 100%;
}




body {
    background-color: #4A6BBE;
    text-align: center;
}




#wrapper {
    text-align: left;
    width: 900px;
    margin: 0 auto;
    background-image: url(1_Logos/hg-steuerung.jpg);
	border-left: black 1px solid;
	border-right: black 1px solid;
}




header {
    background-image: url(1_Logos/Banner.png);
    width: 100%;
    height: 154px;
  }




header p {
    color: midnightblue;
    text-align: right;
    font-size: 2em;
    padding: 10px 40px 0 0;
	text-shadow: 1px 1px 1px black;
	opacity: 0.8;
}




nav {
    width: 200px;
    float: left;
    margin-left: 30px;
}




nav ul {
    list-style-type: none;    
	color: white;  /* damit Aufzählungszeichen weiß angezeigt werden */
}




nav li {
	margin-top: 1em;
}




nav ul ul {
    list-style-type: square;
    padding-left: 1.5em;
    margin-bottom: 1em;
}




nav ul ul li:first-child {
	/* Gegenarbeiten zu nav li { margin-top: 1em; */
	margin-top: 0.4em;   
}




nav a {
    color: white;
    text-decoration: none;
	width: 100%;
	display: inline-block;
	line-height: 1.4em;

	/*  sonst Breite nicht sinnvoll handelbar  */
	box-sizing: border-box;  




    /*  wird erst beim hervorheben der aktiven Zeile benötigt  */
	padding-left: 6px;    
	padding-right: 20px;
}




nav li.aktiv a {
	background-color: midnightblue;
	/*	damit der Pfeil rechts nicht kommt */
	background-image:none;		 
	/*	keine Unterstreichung, dass es nicht nach Link aussieht */
	text-decoration: none;
	/*	Cursor normal, dass es nicht nach Link aussieht */
	cursor: default;             
}




nav a:hover {
    text-decoration: underline;
	background: url(1_Logos/dreieck2.gif) top right no-repeat;	
}




article {
    text-align:justify;
    margin: 20px 20px 30px 255px;
}




article h1,
article h2
{
    color: midnightblue;
    text-align:left;
    	margin-bottom: 0.4em;
}




article p {
/*    hyphens: auto;     Silbentrennung in CSS3 funktioniert aber noch nicht in allen Browsern*/
    padding-bottom: 1em;
    line-height: 1.4em;
}




figure {
	float: right;
	margin: 0.4em 0em 0.4em 0.4em;
 }




figcaption {
	font-size: 80%;
	text-align: center;
	font-style: italic;
}




.bildlinks {
	float: left;
	margin: 0.4em 1em 0.4em 0;
}




.bildrechts {
	float: right;
	margin: 0.4em 0 0.4em 1em;
}




.bildbanner{
   float: none;
}




img{
    border-radius: 8px;
}




img:hover {/*Bilder werden größer dargestellt, wenn man mit der Maus darüber fährt */
    box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
    transition: all 0.5s ease-in-out;
    transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
    z-index: 2;
}







article ul {
    padding-left: 1.4em;
    line-height: 1.4em;
	margin-bottom: 2em;
	list-style-type: circle;
}




article ul ul {
	margin-bottom: 0em;
	list-style-type: square;
}




article li{
               color:  black;
               list-style-type: disc;
               margin: 0 0 0 20px;
		    }




table {
    text-align: left;
	width: 100%;
    border: silver 1px solid;
    border-collapse: collapse;
	margin-bottom: 2em;
}




table thead {
    background-color: midnightblue;
    color: white;
}




table th,
table td {
    padding:2px 3px;
    border-right: black 1px solid;
}




tbody tr:nth-child(even) {background: rgba(204, 221, 238, 1)}
tbody tr:nth-child(odd) {background: rgba(204, 221, 238, 1)}




th,
td{
	border: black 1px solid;
}




/* ab hierDefitionsliste */




dl {
	margin-top: 1em;
	margin-bottom: 2em;
}




dt {
	display: inline-block;
	float: left;
	font-weight: bold;
    text-align: left;
	max-width: 155px;
}




dd {
	margin-left: 165px;
	margin-bottom: 1em;
    text-align: left;
}




dl div {
	clear: both;
	margin-bottom: 1em;
	border: 0;
}




footer {
    background-color: midnightblue;
	text-align: center;
    clear:both;
	line-height: 2em;
	color: white;
	font-size: 80%;
}




footer a {
	color: silver;
	text-decoration: none;
}




.videobereich{
    background-color: aqua; 
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}




.videoExtern{
    background-color: darkgray;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




.tabelleKlein{
    text-align: left;
    font-size: 70%;
}




.tabelleZeile{
    padding: 1px 2px;
}










/* für Nutzung über 900px Menü-Button ausblenden */
.menue-button {
	display: none;
}







/*  */
/*  */
/* für Tablet und Co. - unter 900px (56.25em) */
@media only screen and ( max-width: 56.25em ) {
 
	header {
        background-image: url(1_logos/Banner.png);
		height: 120px;
		background-size: 100%;
		background-position: left top;
		background-repeat: no-repeat;
	}

	#wrapper {
		width: 100% !important;
		background-image: none;
        		border-left: 0;
		border-right: 0;		
	}




	body {
		background-image: none;
		background-color: white;
	}	

	#steuerung {
		display: none;
	}

	article {
		margin: 1em 2em;
	}	





    .img:hover {
        box-shadow: none;
        transition: none;
        transform: none;
}


    .bild{
    width: 100%;
    height: auto;
}
 
	.menue-button {
        background-color: crimson;
        display: block;
        position: absolute;
        right: 20px;
		top: 20px;
        padding: 0.5em;
        color: white;
		left: auto;
        cursor: pointer;
        text-decoration: none;
	}	





	.menue-button:hover {
		color: black;
		background: orange;
	}




	/*	 #steuerung */
	#nav-menue:target #steuerung {
		display: block;
	}

	#nav-menue:target .menue-button-beschr-open {
		display: none; 
	}	

	#steuerung {
		background-color: grey;
		width: 100%;
		float: none;
		margin-left: 0;
		margin-bottom: 1em;
	}	




	#steuerung li {
		border-top: 2px solid silver;
		margin-top: 0;
	}	




	#steuerung ul ul {
		margin-bottom: 0;
	}	

	#steuerung a {
		padding: 0.5em;
		text-decoration: none;   
	}

	#steuerung a:hover {
		color: black;
		background: orange;
		background-image: none;
	}	

	#steuerung li.aktiv a {
		background-color: black !important;
		color: white !important;
	}	

}







/*
*/




/* für kleine Handy-Displays Breakpoint ab 500px = 31.23em*/
@media only screen and ( max-width: 31.25em ) {




	header {
		height: 100px;
		background-size: 500px;
		background-position: right top;
		background-repeat: no-repeat;
	}

	.menue-button {
		right: 20px;
		top: 20px;
		left: auto;
	}	




	header p {
		text-align: right;
		font-weight: bold;
		font-size: 1.3em;
		padding: 0.6em 6.2em 0px 1em;
		opacity: 1;
	}

	/*	Defitionsliste */
	dt {
		float: none;
	}
	dd {
		margin: 0;
		line-height: 1.4em;
	}

	/* Bilder im Inhalt */
	figure {
		float: none;
		margin: 0;
		width: 90%;
	}




	figure img {
		width: 100%;
		height: auto;
	}


	table th, table td {
		padding: 1em; 	
	}

	/*
	tbody tr:nth-child(even) {background: none}
	tbody tr:nth-child(odd) {background: none}
	*/
	tbody tr {background: none !important;}




	
	th,
	td { 
		border: silver 1px solid; 
	}	

	td {
		border:1px solid silver;
	}

	table {
		border:none;
		font-size: 70%;
	}




	thead {
		display:none;
	}




	tr {
		float: left;
		width: 90%;
		margin-bottom: 1em;
	}




	td {
		float: left;
		width: 100%;
		padding:1em;
	}

	td:before {
		content:attr(data-label);
		background: #eee;
		border-right:2px solid black;
		width: 20%;
		float:left;
		padding:1em;
		font-weight: bold;
		margin:-1em 1em -1em -1em;
	}		
}

Alles anzeigen

Basi · 31. März 2016

Okay zwei Sachen fallen mir auf:

1. Du hast in dem Media Query eine Klasse namens "img" selektiert (durch den Punkt).

2. Du musst den Wert zum zurücksetzen auf "none" setzen, nicht auf 0.

Probier also mal:

CSS

@media only screen and ( max-width: 56.25em) {
    /* img:hover statt .img:hover */
    img:hover {
        /* none statt 0 */
        box-shadow: none;
        transform: none;
    }
}

wolf · 31. März 2016

Okay, jetzt eine Dumme Frage, aber wieso überhaupt den Hover ausschalten?
Du kannst das meiner Meinug nach ignorieren, sollange es nicht wichtig für die funktionalität ist

Seepferdchen · 31. März 2016

Hey Basi,
genau dies war mein Fehler!
Funktiniert nun ohne Probleme!
Herzlichen Dank!

Hey wolf,
weil man beim Bedienen des Touchsreen auf Smartphone & Co. den Hover-Effekt auslöst!

Im responsiv Web-Design - img:hover Effekt ausschalten

Jetzt mitmachen!

Teilen