Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Probleme mit Hoverscript

Empfohlene Antworten

Veröffentlicht

Hallo zusammen...

ich setze derzeit eine Joomla-Homepage auf und muss diese natürlich auch für diverse browser programmieren. Mein Problem ist, das das automatische Hoverscript inform einer .htc Datei nicht funktioniert.

CSS-Code des Menüs:


/* Menütformatierung */

ul#mainlevel

{

  list-style-type:none;

  padding-left:10px;

  padding-top:4px;

  border:0px;

  width:990px;

  margin:auto;

}


ul#mainlevel li 

{

  background: url(../images/button.png) top right no-repeat;

  list-style-type:none;

  padding-left:1px;

  padding-right:1px;

  margin:0;

  float: left;

  position: relative;

  width:120px;

}


ul#mainlevel li:hover

{

 background: url(../images/button_o.png) top right no-repeat;

}


ul#mainlevel li ul {

 list-style-type:none;

 padding-left:2px;

 margin:auto;

 width:120px;

 display: none;

 position: absolute;

 top: 20px;

 left: 0px;

}


ul#mainlevel li:hover ul, li.folder ul{

    display:block;

    background:none;

}


ul#mainlevel li ul li{

    opacity:.85;

    filter: alpha(opacity=85);

    -moz-opacity: 0.85;

    clear:both;

	padding:0;

	margin:0;

}

.htc-Datei: Whatever:hover

    body {

    behavior: url("csshover3.htc"); 

    padding-top:0px;

    background: white url("../images/vg_background.png") 0 0 repeat-x;

    margin: auto;

    color: #333;

    width: 1000px;

}
Auf meiner statisch aufgesetzten funktioniert das hovern mit dem IE 6 einwandfrei, da hab ich allerdings auch ein anderes Script:

startList = function()

{

  if (document.all&&document.getElementById)

  {

    navRoot = document.getElementById("nav");

    for (i=0; i<navRoot.childNodes.length; i++)

    {

      node = navRoot.childNodes[i];

          if (node.nodeName=="LI")

          {

            node.onmouseover=function() {this.className+=" over";}

            node.onmouseout=function() {this.className=this.className.replace(" over", "");}

          }

    }

  }

}

window.onload=startList;

Dieses lässt sich aber nicht leicht in den Joomla Quellcode einbauen, da ich nicht weiß wo ich dort das suchen anfangen sollte und Google half mir bisher auch nicht wircklich weiter... Firefox geht alles ohne tadel.

Ich will das eig nur in meine Template einbauen ohne viel an Joomla machen zu müssen, da dies ja den Inhalt auch nur in das Template einfügt.

Ich hoffe ihr könnt mir da weiterhelfen, da ich am verzweifeln bin.

Mit freundlichen Grüßen

Philipp

Bearbeitet von Philipp_John
fehlende Info

.htc-Datei:

Whatever:hover

Da steht doch genau, was Du machen musst:

How do I use it?

Link whatever:hover to the body element, and you're all set. Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

body {

   behavior: url("csshover3.htc");

}

Da "behavior" Microsoft-spezifisch ist und nicht zum CSS-Standard gehört, ist das Stylesheet dann nicht valide. Es wäre demnach geschickter, die htc per Script zu verknüpfen.

  • Autor
Mit CSS wirst du da nicht weit kommen, der IE6 akzeptiert :hover nur für "echte Links" (also a-Elemente) und ignoriert :hover für alle anderen Elemente.

Ich will jetzt nicht nörgeln, aber das hoverscript ist genau dafür da, das der IE6 gezwungen wird zu hovern. Geht auch mehr oder weniger einwandfrei wenn ich keine dynamischen inhalte wie bei Joomla hab und ja ich weiß das

behavior: url("csshover3.htc");

Microsoftspezifisch ist, genau dafür ist es ja auch gedacht, nur dem Internet Explorer zu sagen... mach mir das was Firefox schon kann.

Nur will es hier leider doch nicht im zusammenhang mit Joomla.

Wo genau hast Du das behavior-CSS denn eingefügt?

  • Autor

ok ich hab das Problem gefunden...

Es lag an der Pfadhandhabung von Joomla.

Ich habe dem body-Element nun direkt das behavior zugewiesen und die Datei ins Joomla Hauptverzeichnis gelegt. Schon gehts. Das hover funktioniert nun auch im IE6.

mfg

John

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.