zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Eigenschaft mehrerer Elemente mit hover ändern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.08.2011, 02:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2010
Beiträge: 6
olamuell befindet sich auf einem aufstrebenden Ast
Standard Eigenschaft mehrerer Elemente mit hover ändern

Hallo,
ich habe mit der jQuery Toolbox Tooltips erstellt. Wird ein Element überfahren ändert sich das Hintergrundbild des überfahrenen Elements und es erscheint der zugehörige Tooltip. Funktioniert alles wunderbar.

Was ich jedoch nicht hin bekomme ist, dass beim bei dem hover das Hintergrundbild eines zweiten Elements getauscht wird.

Nun stecke ich aber fest:
http://www.oms-it.de/vkk/berner/index.html

Danke für eure Hinweise.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.08.2011, 10:05
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

welche Hintergrundbilder sollen sich ändern? Produktbild1/2?
oder willst du das beim hover nicht der überfahrende sondern ein anderer punkt sich verändert
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2011, 13:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2010
Beiträge: 6
olamuell befindet sich auf einem aufstrebenden Ast
Standard

Hallo. Danke der Nachfrage. War wohl zu spät gestern...

Zitat:
Zitat von Chris2011 Beitrag anzeigen
welche Hintergrundbilder sollen sich ändern? Produktbild1/2?
Beim Hover über element02 (Produkt 2) soll sich natürlich das Hintergrundbild diese Elements ändern (was es ja auch tut) und zusätzlich der Hintergrund für element02a (Produkt 2a)

Zitat:
Zitat von Chris2011 Beitrag anzeigen
oder willst du das beim hover nicht der überfahrende sondern ein anderer punkt sich verändert
nein, es soll der Hintergrund des "gehoverte Elements und eins anderen Element gewechselt werden.

ich post mal de Code

html

HTML-Code:
<div id="elemente">

<a id="element01" class="trigger"></a>
<div class="tooltip">
<img src="" alt="Produktbild 1" name="Produktbild 1" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<img src="" alt="Produktbild 2" name="Produktbild 2" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<h4 class="title_h4">Beschreibung Produkt 1</h4>
<p>Lorem ipsum dolor sit amet, consectetuer dolor pellentesque, arcu fusce viverra nam, in torquent, mauris ipsum sed. Pretium nulla accumsan convallis praesent, sed dis. Suspendisse sollicitudin lorem tortor enim. Dapibus suspendisse ut gravida, sit dignissim id diam elit.</p>
<p><a href="#">Link 1</a> | <a href="#">Link 2</a></p>
</div>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {

$("#element01").tooltip(
		{ 
		effect: 'fade',
		relative: true,
		offset: [-105,585],
		opacity: [1],
		delay: [600],
		position: 'bottom right'
		});
});
</script>

<div class="e02">
<a id="element02" class="trigger ele02"></a>
<div class="tooltip">
<img src="" alt="Produktbild 1" name="Produktbild 1" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<img src="" alt="Produktbild 2" name="Produktbild 2" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<h4 class="title_h4">Beschreibung Produkt 02</h4>
<p>Lorem ipsum dolor sit amet, consectetuer dolor pellentesque, arcu fusce viverra nam, in torquent, mauris ipsum sed. Pretium nulla accumsan convallis praesent, sed dis. Suspendisse sollicitudin lorem tortor enim. Dapibus suspendisse ut gravida, sit dignissim id diam elit.</p>
<p><a href="#">Link 1</a> | <a href="#">Link 2</a></p>
</div>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {

$("#element02").tooltip(
		{ 
		effect: 'fade',
		offset: [-205,485],
		opacity: [1],
		delay: [600],
		position: 'bottom right'
		});
});
</script>
</div>

<div class="e02a">
<a id="element02a" class="trigger"></a>
<div class="tooltip">
<img src="" alt="Produktbild 1" name="Produktbild 1" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<img src="" alt="Produktbild 2" name="Produktbild 2" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<h4 class="title_h4">Beschreibung Produkt 02a</h4>
<p>Lorem ipsum dolor sit amet, consectetuer dolor pellentesque, arcu fusce viverra nam, in torquent, mauris ipsum sed. Pretium nulla accumsan convallis praesent, sed dis. Suspendisse sollicitudin lorem tortor enim. Dapibus suspendisse ut gravida, sit dignissim id diam elit.</p>
<p><a href="#">Link 1</a> | <a href="#">Link 2</a></p>
</div>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {

$("#element02a").tooltip(
		{ 
		effect: 'fade',
		offset: [-305,385],
		opacity: [1],
		delay: [600],
		position: 'bottom right'
		});
});
</script>
</div>


<a id="element03" class="trigger"></a>
<div class="tooltip">
<img src="" alt="Produktbild 1" name="Produktbild 1" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<img src="" alt="Produktbild 2" name="Produktbild 2" width="270" height="230" class="produktbild" style="background-color: #CCCCCC" />
<h4 class="title_h4">Beschreibung Produkt 03</h4>
<p>Lorem ipsum dolor sit amet, consectetuer dolor pellentesque, arcu fusce viverra nam, in torquent, mauris ipsum sed. Pretium nulla accumsan convallis praesent, sed dis. Suspendisse sollicitudin lorem tortor enim. Dapibus suspendisse ut gravida, sit dignissim id diam elit.</p>
<p><a href="#">Link 1</a> | <a href="#">Link 2</a></p>
</div>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {

$("#element03").tooltip(
		{ 
		effect: 'fade',
		offset: [-55,85],
		opacity: [1],
		delay: [600],
		position: 'bottom right'
		});
});
</script>


</div><!--elemente-->
CSS

HTML-Code:
#elemente {
	margin: 0;
	padding: 0;
	width: 988px;
	height: 650px;
	float: left;
}
.trigger {
	display:block;
	height:30px;
	width:30px;
	overflow:hidden;
	cursor: pointer;
	}
.trigger:hover {
/*	background: url(../images/poi_hover.png) top left no-repeat;*/
	}
/* trigger button */

#element01 {
	background: url(../images/poi_default.png) top left no-repeat;
	float: left;
	position: relative;
	left: 85px;
	top: 85px;
	z-index: 5;
}
#element02 {
	background: url(../images/poi_default.png) top left no-repeat;
	float: left;
	position: relative;
	left: 155px;
	top: 185px;
	z-index: 5;
	}
#element02a {
	background: url(../images/poi_default.png) top left no-repeat;
	float: left;
	position: relative;
	left: 225px;
	top: 285px;
	z-index: 5;
	}

#element03 {
	background: url(../images/poi_default.png) top left no-repeat;
	float: left;
	position: relative;
	left: 495px;
	top: 35px;
	z-index: 5;
	}

/* mouseover state */
#element01:hover,
#element02:hover,
#element02a:hover,
#element03:hover {
	background: url(../images/poi_hover.png) top left no-repeat;
}

/* clicked state */
#element01:focus {
}

/* tooltip styling */
.tooltip {
	position: relative;
	top: 0;
	left: 0;
	display:none;
	background-color: #E7EFFB;
	margin: 0;
	padding: 10px;
	width: 270px;
	min-height: 400px;
	font-size:12px;
	color: #333;
	-webkit-box-shadow: -5px 5px 5px #e2e2e2; /* Safari */
	box-shadow: -5px 5px 5px #e2e2e2;
}
Danke+ Gruß
Mit Zitat antworten
  #4 (permalink)  
Alt 31.08.2011, 14:02
do{ atmen(); }while(!tot)
XHTMLforum-Mitglied
 
Registriert seit: 03.08.2011
Beiträge: 103
Sinokle befindet sich auf einem aufstrebenden Ast
Standard

Du kannst lediglich dann die Eigenschaften anderer Elemente bei einem Hover verändern, wenn diese anderen Elemente Kinder des gehoverten Elements sind.
Du könntest für den Elementbaum von Produkt 2 ein weiteres übergeordnetes Element erstellen, das sowohl Produkt 2 als auch 2a umschließt und die Hintergründe bei Hover über dieses neue Elternelement ändert.

P.S.: Muss das wirklich sein, diese Produktübersicht nur mit Javascript zugänglich zu machen? Es ist möglich, die Position mit einfachem CSS2 und die Effekte mit CSS3 ("Progressive Enhancement") komplett ohne Javascript zu erstellen.
Aber ich will nicht meckern, deine Entscheidung.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.09.2011, 17:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2010
Beiträge: 6
olamuell befindet sich auf einem aufstrebenden Ast
Standard

Danke sinokle für den Hinweis mit den Eltern-Elementen. So habe ich es lösen können.

Da js muss sein, da es mit dem css3-Effekten nicht die Möglichkeit gibt die Elemente erst nach einer Verzögerung sich ausblenden zu lassen - soweit ich weiß...

MfG
Mit Zitat antworten
  #6 (permalink)  
Alt 08.09.2011, 17:03
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von olamuell Beitrag anzeigen
Da js muss sein, da es mit dem css3-Effekten nicht die Möglichkeit gibt die Elemente erst nach einer Verzögerung sich ausblenden zu lassen - soweit ich weiß...
Ich gebe dir einen Tipp: Bring es ohne JS zum Laufen. Viele Leute blocken das standardmäßig
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 08.09.2011, 18:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2010
Beiträge: 6
olamuell befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
Ich gebe dir einen Tipp: Bring es ohne JS zum Laufen. Viele Leute blocken das standardmäßig
Danke für den Tipp. Aber bei 1-2%... kann ich es in diesem Fall verschmerzen und vermutlich können dies auch alle anderen die jQuery nutzen...

Siehe:
How many users have JavaScript disabled? · YDN Blog

MfG

Geändert von olamuell (08.09.2011 um 18:13 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.09.2011, 18:20
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

So lange die Information auch ohne JS zugänglich ist, ist es auch vollkommen vertretbar.

Außerdem wurde JS -- damals zumindest -- hauptsächlich aus Sicherheitsaspekten deaktiviert. Aber die heutigen Browser haben dort kräftig nachgearbeitet und bringen auch regelmäßig Sicherheitsupdates raus.

In manchen Browsern lässt sich JS sogar "beschneiden" - die richtige Konfiguration macht's.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #9 (permalink)  
Alt 08.09.2011, 20:47
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von olamuell Beitrag anzeigen
Danke für den Tipp. Aber bei 1-2%... kann ich es in diesem Fall verschmerzen und vermutlich können dies auch alle anderen die jQuery nutzen...
Leute die Plugins wie NoScript oder so nutzen haben JS nicht deaktiviert. Sie können JavaScript nicht sehen und tauchen in so Statistiken nicht auf. Ich würde mich da nicht drauf verlassen
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 13:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 18:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 15:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:22 Uhr.