Fallback CSS Regeln UND benachbarte Elemente ansprechen

L

LeMarkus

Mitglied
Hallo, ich habe zwei Fragen:
1.) Ich arbeite zur Zeit an einem kleinen Projekt. Die Webseite, die ich dafür machen muss, soll ein paar fadeIn usw. Effekte per jQuery bekommen. Dies funktioniert auch problemlos. Wenn ich allerdings sowohl eine jQuery Lösung mache und im CSS die entsprechende CSS Lösung (falls Javascriprt deaktiviert ist), dann wird die jQuery Variante einfach "überschrieben". Dies war wahrscheinlich nicht verständlich, deshalb ein kleines Beispiel:

Ich würde gerne wenn man über einen a-tag hovert das darin liegende span-Element einblenden und entsprechend wieder ausblenden. Der HTML teil davon ist ganz einfach:
Code: 
<a href=""><span></span></a>
Der CSS Teil davon ist ebenfalls simpel, aber ohne Animation
Code: 
a span { display: none; }
a:hover span { display: block; }
Der jQuery Teil ebenfalls sehr einfach
Code: 
$(document).ready(function() {
   $("a").mouseenter(function() {
       $("span", this).fadeIn(300);
   });
   $("a").mouseeleave(function() {
       $("span", this).fadeOut(300);
   });
});
Wenn ich allerdings so eine Datei anlege mit CSS und jQuery, dann wird der span Container ruckhaft eingeblendet und nicht eingefadet, obwohl es im Javascript steht. Wenn ich allerdings das
Code: 
a:hover span { display: block; }
weglasse, dann wird der span Container schön eingefadet (natürlich nur wenn man dem auch eine Hintergrundfarbe gibt). Allerdings funktioniert dies dann nur mit eingeschaltetem Javascript. Gibt es eine Möglichkeit entsprechende CSS Regeln mit jQuery zu deaktivieren, damit diese ignoriert werden und er trotz Fallback CSS Regeln nur den Javsascript Code ausführt. Oder gibt es eine bessere Lösung?

2.) Wie spreche ich benachbarte Elemente mit jQuery an. Also der HTML Code sieht so aus
Code: 
<div class="clearfix" id="portfolio">
  <ul>
    <li><a href=""><span></span><img src="images/showcase_ex1.png" /></a><div    class="left">Info</div></li>
  </ul>
</div>
Ich möchte nun bei :hover über den a-tag (im li-Element) das benachbarte div.left einfaden lassen. Mit CSS geht dies mit Hilfe des "+" Selektors:
Code: 
#portfolio ul li div.left { display: none; position: absolute; left: 137px; top: 0; z-index: 2;width: 134px; height: 134px; }
#portfolio ul li a:hover + div.left { display: block; }

Allerdings ist das wieder so ruckhaft (siehe oben). Ich hätte gerne eine jQuery Lösung, damit es richtig einfadet. Geht dies?

Vielen Dank und gruß
 
1.)
Die höchste Priorität hat inline-css, als musst du dieses explizit setzen.

Javascript: 
$("span", this).hide().fadeIn(300);
//bzw.
$("span", this).show().fadeOut(300);

Noch ein Hinweis: Nimm die "hover()" Funktionen und gib ihr als Parameter zwei Funktionen. Ist im Prinzip eine Kurzschreibweise für mouseenter und mouseleave.

2.)
Die in jQuery integrierte Sizzle-CSS-Selektor-Engine unterstützt alle CSS3 Selektoren (plus ein paar extras), also auch den "+" Selektor. Da der Selektor aber nicht immer so gut benutzt werden kann (wenn man z.B. schon eine Element hat), kann man die next() Funktion benutzen.
http://api.jquery.com/next/
Oder wenn es allgemein um Nachbarn (Geschwister) geht, dann "sliblings()" http://api.jquery.com/siblings/

Javascript: 
$("a").hover(function() {
    $(this).next("div.left").hide();
}, function() {
    $(this).next("div.left").show();
});
 
Zuletzt bearbeitet:
Vielen Dank Frage 2 wäre geklärt. Danke auch für den Hinweis mit hover.
Code: 
$("#portfolio ul li a").hover(function() {
     $(this).next().stop(false, true).fadeIn(300);			
}, function () {	
    $(this).next().stop(false, true).fadeOut(50);
});


Frage 1 hast du glaube ich falsch verstanden. Habe ich wahrscheinlich schlecht erklärt. Mir geht es nicht, um die höchste Priorität vom CSS sondern darum, dass das Javascript File eine höhere Priorität bekommt als das CSS.
Ich möchte also sowohl das JS

Code: 
$("span", this).hide().fadeIn(300);
//bzw.
$("span", this).show().fadeOut(300);

als auch das CSS

Code: 
a:hover span { display: block; }

in der Datei haben. Mit eingeschaltetem Javascript soll allerdings immer die elegantere Fade Lösung (JS) das span einblenden und NUR wenn Javascript deaktiviert sein sollte, "greift" die Notlösung mit dem "unschönen" Erscheinen des spans mit Hilfe des CSS Codes. Im Moment ist es aber immer andersrum. Das heisst die Javascript Variante funktioniert nur, wenn der CSS Code nicht in der CSS drin steht.
 
Ich hab dich schon richtig verstanden. Das hier funktioniert so wie du es möchtest.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>CSS vs jQuery</title>
	
	<style type="text/css">
		a span {display:none;}
		
		a:hover span {display:inline;}
	</style>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			$("a").hover(function(e) {
				$("span").hide().fadeIn();
			}, function() {
				$("span").show().fadeOut();
			});
		});
	/* ]]> */
	</script>
</head>

<body>
	<div>
		<a href="#">
			Foo<span>bar</span>
		</a>
	</div>
</body>

</html>

Edit: Zur Erklärung:
Durch "hide()" bzw. "show()" wird entsprechend durch inline-css die display Eigenschaft auf "none" oder "inline" gesetzt. Dadurch wird die Deklaration in deiner CSS Datei ignoriert.
 
Zuletzt bearbeitet:
Geht das nur mit inline CSS oder auch mit externen CSS Dateien (mit diesem show + hide). Weil wenn es nur mit inline CSS geht dann ist das leider keine Lösung für den alltäglichen Gebrauch, weil externe CSS Dateien schon wichtiger sind als funktionierende Effekte. Außer natürlich es gibt noch andere Varianten mit exteren Dateien...
 
Inline CSS ist sowas hier
HTML: 
<span style="color:#00f;font-weight:bold;">Ich bin fett blau!</span>

Ich hab das CSS nur in die Datei geschrieben, weil ich für die zwei Regeln keine extra Datei nehmen wollte. Ob du das in die Datei schreibst oder mit Hilfe des link-Tags extern auslagerst, spielt keine Rolle. Das Inline CSS hat immernoch die höchste Priorität.

Hier mal mit zwei Dateien.

css_vs_jquery.css
CSS: 
a span {display:none;}

a:hover span {display:inline;}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>CSS vs jQuery</title>
	
	<link href="css_vs_jquery.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			$("a").hover(function(e) {
				$("span").hide().fadeIn();
			}, function() {
				$("span").show().fadeOut();
			});
		});
	/* ]]> */
	</script>
</head>

<body>
	<div>
		<a href="#">
			Foo<span>bar</span>
		</a>
	</div>
</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück