|
|||
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. |
Sponsored Links |
|
|||
Hallo. Danke der Nachfrage. War wohl zu spät gestern...
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:
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--> 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; } |
|
|||
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. |
|
|||
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 |
|
|||
Zitat:
Siehe: How many users have JavaScript disabled? · YDN Blog MfG Geändert von olamuell (08.09.2011 um 18:13 Uhr) |
|
||||
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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |