Hover passiert über die Breite des Elements

Question

Wenn ich den Mauszeiger über den Hyperlink halte, geht es über den Linktext hinaus.

Die jsFiddle Link lautet: jsFiddle

scheint es, Breite der <div> ist zu nehmen und damit die ganze <div> Element erscheinen. Hier

ist die HTML (mit Fundament):

<div class="container row"> 
    <a href="#"> 
     <div id="logo" class="large-3 columns"> 
      <span>My Bank ,too Big</span> 
     </div> 
    </a> 
</div> 

Wie kann ich dieses Problem lösen? Ich kann die hier angewandten Grundschulklassen nicht ändern. Liegt das an dem Element <span>?

Ich versuchte, die <span> Breite zu reduzieren, aber keine Änderungen im Verhalten beobachtet wurde.

Answer 1

Das Problem ist, weil Sie die div innerhalb a Tag haben. Alle div Tags sind standardmäßig Blockelemente und nehmen somit die gesamte verfügbare Breite in Anspruch, während ein a Tag standardmäßig inline ist und nur die erforderlichen Elemente enthält. Es wäre behoben, wenn Sie die a innerhalb des Tags div wie im folgenden Snippet verschieben.

.row.container { 
 
    max-width: 1020px; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
} 
 
.row.container { 
 
    position: relative; 
 
} 
 
.row.container:after, 
 
.row.container:before { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.large-3 { 
 
    width: 25%; 
 
} 
 
#logo { 
 
    margin: 46px 0 0; 
 
    padding: 0 0 46px; 
 
}

<div class="container row"> 
 
    <div id="logo" class="large-3 columns"> 
 
    <a href="#"> 
 
     <span>My Bank ,too Big</span> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

Sie können die #logo Breite auto und dann inline-block den Anker machen.

Alternativ #logo auf display: inline-block oder inline setzen. Das Problem tritt auf, wenn Sie ein Blockelement <div> in ein Inline-Element <a> einfügen.

.row.container { 
 
    max-width: 1020px; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
} 
 
.row.container { 
 
    position: relative; 
 
} 
 
row.container:after, 
 
.row.container:before { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.large-3 { 
 
    width: 25%; 
 
} 
 
header #logo { 
 
    margin: 46px 0 0; 
 
    padding: 0 0 46px; 
 
} 
 
#logo { 
 
    width: auto; 
 
} 
 
.row.container a { 
 
    display: inline-block; 
 
}

<div class="container row"> 
 
    <a href="#"> 
 
    <div id="logo" class="large-3 columns"> 
 
     <span>My Bank ,too Big</span> 
 
    </div> 
 
    </a> 
 
</div>

Answer 3

Alles, was Sie tun müssen, ist diese #logo Regel zu Ihrem hinzufügen:

#logo { 
    display: inline-block; 
    width: auto; 
} 

Das das gesamte <div> Element als klickbaren Bereich bewahrt, anstatt nur, dass der <span>, während die <div> Elementbreite konsistent mit dem Text bleibt.

Versuchen Sie den Code unten aus:

.row.container { 
 
    max-width: 1020px; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
} 
 
.row.container { 
 
    position: relative; 
 
} 
 
.row.container:after, 
 
.row.container:before { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.large-3 { 
 
    width: 25%; 
 
} 
 
#logo { 
 
    margin: 46px 0 0; 
 
    padding: 0 0 46px; 
 
    background: lightgreen; 
 
    display: inline-block; 
 
    width: auto; 
 
}

<div class="container row"> 
 
    <a href="#"> 
 
    <div id="logo" class="large-3 columns"> 
 
     <span>My Bank ,too Big</span> 
 
    </div> 
 
    </a> 
 
</div>