1

这个问题并没有很好地描述这一点。所以我得到了三个小图像，它们假设在悬停时会改变并作为链接工作，但它只在图像的一小部分“检测”悬停。如果我将鼠标拖到图片链接的底部，它甚至无法点击，因此该链接仅适用于图片的顶部。

自己看：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;
}
4

3 回答 3

2

You currently have your images set to display as inline. This will make them adhere to any line-height defaults a browser may have set on your a element, keeping your a element at a smaller height. This can be visualised in Chrome's Element Inspector:

inline example

To change this, simply set the display on your a elements to inline-block:

a {
    display: inline-block;
}

inline-block example

JSFiddle demo.

Note that you may want to be a bit more specific with your a selector by specifying .kielet nav a, for instance, or giving your a elements their own class identifier.

于 2013-10-29T10:04:26.630 回答
1

尝试将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

于 2013-10-29T10:03:11.757 回答
1

Usually you don't implement your hover-state with javascript and <img />

You can easily do this with 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

于 2013-10-29T10:11:02.437 回答