Element auf Hover erhöhen, aber ursprünglichen Hover-Bereich beibehalten

Question

Ich habe ein Bild, das ich vergrößern möchte, wenn ich den Mauszeiger darüber bewege, aber ich möchte den Bereich, den der Hover akzeptiert, nicht vergrößern. AKA, wenn ich darüber schwebe. Ich möchte es nicht machen, also musst du deine Maus weiter wegbewegen, um das Element zu verlassen.

Ich habe nicht den Luxus, den HTML-Code zu ändern oder JavaScript zu verwenden, da ich die CSS einer Seite modifiziere.

Dies sind die Elemente, mit denen ich arbeite.

Ich habe zahlreiche Kombinationen von :: vor und Selektoren ausprobiert, um es zur Arbeit zu bringen. Oftmals hinterlässt das Ergebnis nur ein Flackern.

Ist das mit reinem CSS möglich?

Answer 1

Ein möglicher Weg position: relative; und z-index: -1; auf .image, und halten die :hover pseudo-Klasse auf .link zu verfolgen verwendet. Ich habe hier eine Demonstration eingerichtet: http://codepen.io/anon/pen/BLwPEY

Ich nehme einige Freiheiten mit den Stilen, aber einfach zu Demonstrationszwecken.

Ich bin mir nicht sicher, was das Ergebnis sein soll (z. B. Bild bleibt zentriert oder genau wie die Bildgröße ändert), aber das kann ein Anfang sein. Beachten Sie, dass der Effekt (zumindest für mich) glitschig zu sein scheint, wenn Sie über oder unter den Mauszeiger treten - wenn Sie den Mauszeiger schnell verlassen und dann am Rand des Bildes anhalten, scheint der Schwebezustand zu bestehen. Nicht sicher, warum, und ich habe mehrere verschiedene Dinge ausprobiert, um es ohne Erfolg zu beheben.

Wie auch immer, es könnte ein Ort sein, um zu beginnen.

Answer 2

Versuchen Sie, das Bild zu vergrößern, wenn Sie den Mauszeiger über den Anker bewegen und sicherstellen, dass der Durchmesser des Ankers gleich bleibt und dass der Überlauf sichtbar ist.

Answer 3

Bearbeiten: Sorry, ich habe Ihren Beitrag falsch gelesen und die Tatsache, dass Sie nur CSS verwenden können, verpasst. Ich habe meine Lösung so angepasst, dass sie innerhalb Ihrer bestehenden Einschränkung funktioniert. Die Technik ist ähnlich, die Eltern a verwendet die z-index zu sein "über" img. Ich fügte einen Rand zum a hinzu, also können Sie sehen, dass es die gleiche Größe sogar mit der Vergrößerung des Kindes img bleibt, wenn Sie über a schweben.

Funktioniert das für Sie?

a.link > img.hover-info { 
 
    width: 135px; 
 
    height: 155px; 
 
    transition: 500ms; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -999; 
 
} 
 

 
a.link { 
 
    display: block; 
 
    width: 135px; 
 
    height: 155px; 
 
    border: 1px solid #000000; 
 
    z-index: 999; 
 
} 
 

 
a.link:hover > img.hover-info { 
 
    width: 270px; 
 
    height: 310px; 
 
}

<table> 
 
    <tbody class="list-item" style=""> 
 
    <tr class="list-table-data"> 
 
     <td class="data number"/> 
 
     <td class="data image"> 
 
      <a class="link sort"> 
 
       <!--What I want to enlarge--> 
 
       <img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png" class="hover-info image"> 
 
      </a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>