<a> works for only a small part of an image?</a>

Question

这个问题并没有很好地描述。 所以我得到了三张小图片，这些图片假设在悬停时更改并作为链接工作，但它会检测到＆＃39;＆＃39;＆＃39;＆＃39;仅悬停在图像的一小部分中。如果我将鼠标拖到图像链接的底部，它甚至都不可点击，因此链接仅适用于图像的顶部。

亲眼看看： http://jsfiddle.net/M3LC9/（JSFiddle不喜欢图片..）

<div class="kielet">
 <nav>

 <!--Englanti-->

 <a href="en_index.html"><img class="icon" src="iconit/en.gif" title="in english" onmouseover="this.src='iconit/en_hover.gif'" onmouseout= "this.src='iconit/en.gif'"></a>

 <!--Ruotsi-->

 <a href="swe_index.html"><img class="icon" src="iconit/swe.gif" title="på svenska" onmouseover="this.src='iconit/swe_hover.gif'" onmouseout="this.src='iconit/swe.gif'"></a>

 <!--Venäjä-->

 <a href="ru_index.html"><img class="icon" src="iconit/ru.gif"  title="По русски" onmouseover="this.src='iconit/ru_hover.gif'" onmouseout="this.src='iconit/ru.gif'"></a>
 </div>

---

.kielet {
top:0px;
width:100%;
background: black;
right: 0px;
margin-bottom:0px;
padding:0px;
}

.kielet nav {
right: 0px;
margin-right: 0px;
text-align: right;
}

.icon {
width: 50px;
height: 100%;
right: 0px;
margin: 20px;
margin-top:0px;
margin-bottom:0px;
display:inline;
padding: 0px;
}

Answer 1

您目前将图像设置为inline。这会使他们遵守浏览器可能在line-height元素上设置的任何a默认值，从而使a元素保持在较小的高度。这可以在Chrome的Element Inspector中显示：

要更改此设置，只需将a元素的显示设置为inline-block：

a {
    display: inline-block;
}

JSFiddle demo

请注意，您可能希望通过指定a，或者将.kielet nav a元素设为自己的{{1}来更加具体地使用a选择器标识符。

Answer 2

尝试将display属性更改为display:inline-block

.icon {
width: 50px;
height: 100%;
right: 0px;
margin: 20px;
margin-top:0px;
margin-bottom:0px;
display:inline-block; <----
padding: 0px;
}

JSFiddle

Answer 3

通常，您不会使用javascript和<img />

来实现您的悬停状态

您可以使用 CSS 轻松完成此操作。

HTML

<div class="kielet">
    <nav>
        <!--Englanti-->
        <a href="en_index.html" class="icon icon_en" title="in english">&nbsp;</a>
        <!--Ruotsi-->
        <a href="swe_index.html" class="icon icon_swe" title="på svenska">&nbsp;</a>
        <!--Venäjä-->
        <a href="ru_index.html" class="icon icon_ru" title="По русски">&nbsp;</a>
    </nav>
 </div>

CSS

.kielet {
    background: black;
    padding: 5px;
    text-align: center;
}

a.icon {
    display: inline-block;
    width: 16px;
    heiht: 16px;
    line-height: 16px;
}

a.icon_ru { background: url(http://placehold.it/16x16/ffc) center no-repeat; }
a.icon_ru:hover { background: url(http://placehold.it/16x16/ff0) center no-repeat; }
a.icon_en { background: url(http://placehold.it/16x16/cff) center no-repeat; }
a.icon_en:hover { background: url(http://placehold.it/16x16/0ff) center no-repeat; }
a.icon_swe { background: url(http://placehold.it/16x16/fcf) center no-repeat; }
a.icon_swe:hover { background: url(http://placehold.it/16x16/f0f) center no-repeat; }

<强> jsFiddle