同時突出顯示的文本和圖像

我想要的圖像和文本，同時在突出顯示。當鼠標懸停在圖像上時，文本將突出顯示，但當鼠標懸停在文本上時，圖像不會更改。

順便說一句，我無法刪除與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; 
}

來源

2013-10-10 Yago González

添加下面的CSS來獲取圖像上突出徘徊的文本。

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

Demo Fiddle

編輯：當沒有src屬性用於在img標籤（如一種用於圖像的佔位符的）顯示邊界。在這裏你將圖像作爲背景。因此，我的建議是使用一個空的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，這是完全有效的。

來源

2013-10-10 12:23:08 Harry

非常感謝哈里！ –

更改HOVER的規則是這樣的：

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

... 

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

請參閱下小提琴：http://jsfiddle.net/H7DFA/

來源

2013-10-10 12:23:50 Juna

編輯.imghover2:hover類是這樣的：

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

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

來源

2013-10-10 12:26:55

同時突出顯示的文本和圖像

回答

相關問題