翻譯內部鏈接懸停的元素

我正在嘗試使用CSS3過渡將對象水平地轉換到右側。這似乎很簡單，但也許我失去了一些東西......翻譯內部鏈接懸停的元素

這是我有：

<h1> 
    <a href="#" class="qa">Check Q&amp;A<i class="icon-right-open-gal"></i></a> 
</h1>

的i是放置一個精靈的圖像。一旦鏈接懸停，我希望這個元素水平向右移動。

.qa{ 

    &:link,&:visited{ 
    padding: 10px; 
    text-decoration: none; 
    color: #f2f2f2; 
    font-size: 18px; 
    // @include background-image(linear-gradient(bottom, #42BA70, #49CB7A)); 
    background-color: #E3560D; 
    @include box-shadow(inset 1px 1px rgba(255,199,170,0.5)); 
    @include box-sizing(border-box); 
    text-transform: uppercase; 
    @include transition-property(all); 
    @include transition-duration(0.2s); 
    @include transition-timing-function(ease-in-out); 

    i{ 
    font-size: 13px; 
    } 

    span{ 
     font-family: helvetica-neue, helvetica, serif; 
     font-size: 15px; 
    } 
    } 


    &:hover, &:active{ 
    background-color: #F77902; 
    @include box-shadow(inset 1px 1px rgba(248,255,170,0.5)); 

     i{ 
     -webkit-transform: translateX(40px); 
     -moz-transform: translateX(40px); 
     -o-transform: translateX(40px); 
     transform: translateX(40px); 
     } 
    }

我嘗試了幾個選項，但都沒有工作。可以有人如何正確使用它。我正在爲這個項目使用SASS。我沒有羅盤混音就離開了翻譯資產，使其更加清晰。

來源

2013-10-30 Daniel Ramirez-Escudero

問題在於<i>標記是內聯的。它需要一個佈局才能被翻譯。要做到這一點，只要給它一個display: inline-block屬性，一切都很好。看到這個簡單的小提琴http://jsfiddle.net/WxqCw/

來源

2013-10-30 22:55:06 dariusc

謝謝！有效。我已經不止一次地討論了這個問題，現在知道什麼是在線或不在線。你知道有哪些文檔能夠很好地學習什麼是內聯元素，哪些元素是內聯的？ P.D.它爲我工作，但小提琴現在不工作...... –

對小提琴抱歉。關於學習哪些內聯/塊元素，我會建議看看mdn：[https://developer.mozilla.org/en-US/docs/Web/HTML/Element](https://developer.mozilla.org/en -US/docs/Web/HTML/Element） – dariusc

這裏有相關鏈接：[內嵌元素]（https://developer.mozilla.org/en-US/docs/HTML/Inline_elements）[塊元素]（https ：//developer.mozilla.org/en-US/docs/HTML/Block-level_elements） – dariusc

翻譯內部鏈接懸停的元素

回答

相關問題