Question

我正在尝试做菜单。

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

顺便说一句，我无法使用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>内不允许使用块级元素。但是使用HTML5，它完全有效。

Answer 2

更改您的HOVER规则：

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

...

.bloqueinicio:hover a {
color: #FF8000;
}

请参阅以下小提琴：http://jsfiddle.net/H7DFA/

Answer 3

像这样编辑.imghover2:hover类：

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

http://jsfiddle.net/mohsen4887/pVcQG/5/

文本和图像同时突出显示

3 个答案: