auf hover-overlay-Bild in CSS

Brauche ich ein div mit bg Bild durch überlagerung ein Bild (eine gewisse Transparenz), als schwebte. Ich muss in der Lage sein, ein transparentes overlay verwendet werden können und wiederverwendet, die in der gesamten Website auf ein beliebiges Bild. Mein Erster Versuch war Runde-rund um das Mindeste zu sagen. Da fand ich heraus, Sie kann nicht Rollen über einen unsichtbaren div-ich entwickelte eine Sandwich-system, in dem das original-Bild der ersten Schicht-das overlay ist die zweite Schicht und das ursprüngliche Bild in der Dritten Ebene wieder. Dieser Weg, wenn Sie roll-over, das ursprüngliche Bild verschwindet, enthüllt das overlay-Bild über das ursprüngliche Bild:

http://www.nightlylabs.com/uploads/test.html

Damit es funktioniert. Irgendwie. Weil Sie nicht interagieren mit einer Sichtbarkeit:unsichtbare Elemente (warum?!) die roll-over flackert, es sei denn Sie positionieren Sie den cursor auf es.

Hilfe? Diese Methode ist schlecht, also wenn jemand einen besseren, bitte kommentieren.

Haben Sie berücksichtigt das individuelle anpassen der z-index-Eigenschaft? Habe ich noch nicht getestet, nichts. Ich denke nur laut.
z-index funktioniert, wie es sollte. das flackern, was passiert, egal was, es ist nur ein Nebeneffekt der "Sichtbarkeit:unsichtbar".
Außerdem ist css eine Anforderung? Würden Sie sich mithilfe von javascript um bei dieser Aufgabe helfen?
Ich würde, solange es ist nicht schwer zu implementieren. Ich bin echt schlecht in javascript.
Sie sollten überprüfen, JQuery. Es hat viele Effekte und es ist relativ einfach zu implementieren.

InformationsquelleAutor | 2010-03-19

  1. 2

    Ich habe folgende css-und seine feine.

    #container { position:relative; width:184px; height:219px;}
    .image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
    .overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
    .top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
    .top-image:hover { background-image:none;}
    schön gemacht. danke.
    kurze Frage, aber: ie7 nicht zu mögen. irgendwelche Ideen?
    Bitte erklären Sie, was Sie erleben, im ie7 ein bisschen weiter, wie ich es schön angezeigt im ie7
    Leicht geändert, aber Gleiches Prinzip: nightlylabs.com/uploads/test.html funktioniert nicht mit Ie7. Musste es ändern, weil die bisherige Methode war zu Komplex und ich brauche das Bild angezeigt wird, in das markup, weil es dynamisch generiert.

    InformationsquelleAutor Ali Habibzadeh

  2. 0

    Das Bild flackert, weil Sie sich nicht bewegen Sie den Mauszeiger über etwas, das nicht da ist.
    Es wird funktionieren, wenn Sie ihn geschichtet in der Regel (kein z-index notwendig) und machen es transparent, so dass es noch angezeigt wird, und kann mit der Maus auf.
    Das zweite Bild nicht flimmern, und Sie können Steuern, das styling mit dem span-tag. Hier einige der CSS habe ich:

    img.side
    {position:absolute;
    border:1px solid black;
    padding:5px 5px 5px 5px;
    float:center;}
    /*normal base images*/

img:hover+span
        {display:block;}
    /*new images. automatically display beneath base/hover image*/

.side:hover
        {opacity:0;}
    /*base images again, only when hovered over*/

span
        {display:none;
        cursor:pointer;}

    Den hover-tag bestimmt die Gestaltung der base-img (und base-div), und bewegen Sie die Maus+Spanne definiert das styling der img, die nur erscheint, wenn die Maus.

    Hier ist der html zeigt das div ganz:

        <div class="only" id="one">
            <img class="side" id="ach" src="ach.svg">Academic</a>
                <span>
                <img class="hovering" id="hach" src="Hach.svg">Academic</a>
                </span>
        </div>

    Hoffe, das hilft.

    InformationsquelleAutor Hannah

Schreibe einen Kommentar