html - 文本和图像同时突出显示

Question

我正在尝试做一个菜单。

http://jsfiddle.net/yagogonzalez/pVcQG/

我希望同时突出显示图像和文本。当鼠标悬停在图片上时，文本会高亮显示，但当鼠标悬停在文本上时，图像不会发生变化。

顺便说一句，我无法使用 border-style: none; 删除图像边框。

我希望有人能帮助我。非常感谢!

<div class="iniciocenter">
    <div class="bloqueinicio">
        <a href="?page_id=7">
            <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">nosotros
        </a>
    </div> 
    <div class="bloqueinicio">
        <a href="?page_id=8">
            <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');">cuentos
        </a>
    </div> 
</div>

风格

.iniciocenter {
    text-align: center;
}
.imghover2 {
    width:190px;
    height:190px;
}
.imghover2:hover {
    background-position:0px -190px;
}
.handlee{
    font-family: handlee;
    font-size: 24px;
    font-size: 1.714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
}
.bloqueinicio {
    display:inline-block;
    text-align: center;
    font-family: handlee;
    font-size: 22px;
    font-size: 1.971rem;
    color: #365F8B;
    width:190px;
    height:50px;
}
.bloqueinicio a {
    text-decoration: none;
    color: #375F8F;
}
.bloqueinicio a:hover {
    color: #FF8000;
}

Answer 1

将以下代码添加到 CSS 中，使图像在悬停文本时突出显示。

.bloqueinicio a:hover .imghover2{
    background-position:0px -190px;
}

Demo Fiddle

编辑 当 img 出现时边框出现在没有 src 的情况下使用标签属性(作为图像的一种占位符)。在这里，您将图像放置为背景。因此，我的建议是使用一个空的 div。标签而不是 img如下所示的标记以消除该边框。

<div class="bloqueinicio">
    <a href="?page_id=7">
        <div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">
        </div>
        nosotros
    </a>
</div>

Demo Fiddle 2

附加信息:您可能想看看 this SO thread也在实现编辑中提到的建议之前。基本上它表示按照 HTML 4.01，<a> 中不允许 block 级元素.但对于 HTML5，它是完全有效的。