3

我正在尝试做一个菜单。

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;
}
4

3 回答 3

3

将以下内容添加到 CSS 以在悬停文本时突出显示图像。

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

演示小提琴

编辑：当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>

演示小提琴 2

附加信息：在实施编辑中提到的建议之前，您可能还想看看这个 SO 线程。基本上它说根据 HTML 4.01，块级元素不允许在<a>. 但是对于 HTML5，它是完全有效的。

于 2013-10-10T12:23:08.487 回答
1

像这样编辑.imghover2:hover类：

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

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

于 2013-10-10T12:26:55.557 回答
1

像这样更改您的 HOVER 规则：

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

...

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

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

于 2013-10-10T12:23:50.780 回答