用於文本顏色和移動文本的css動畫，用jquery示例

我正在嘗試對文本顏色進行動畫處理，並且在將文字懸停後向右移動約15px。我認爲這是可能的與CSS，但不知道從哪裏開始。用於文本顏色和移動文本的css動畫，用jquery示例

$('#home_solutions_list li').mouseenter(function() { 
    link = $(this).find('.home_view_products a'); 
    link.stop(true, true).animate({ 
    'color': '#636a6d' 
    }, 'fast'); 
    link.find('span').animate({ 
    'padding-left': '20px' 
    }, 'fast'); 
});

所以顏色應該改變（不工作jsfiddle），然後後面的span元素應該移動到文本的右邊。但是隻有span元素應該移動，當前文本居中，鏈接文本也在移動。這可以簡單地在css中完成嗎？

http://jsfiddle.net/Q8KVC/2278/

來源

2017-03-13 Source

設置此：

.home_view_products a span { 
    font-size: 16px; 
    padding: 5px; 
    position: relative; 
    left: 0; 
}

，改變你的JS這樣的：

$('#home_solutions_list li').mouseenter(function() { 
    link = $(this).find('.home_view_products a'); 
    link.stop(true, true).animate({ 
    'color': '#636a6d' 
    }, 'fast'); 
    link.find('span').animate({ 
    'left': '20px', 
    }, 'fast'); 
}); 
$('#home_solutions_list li').mouseleave(function() { 
    link = $(this).find('.home_view_products a'); 
    link.stop(true, true).animate({ 
    'color': '#1a92d0' 
    }, 'fast'); 
    link.find('span').animate({ 
    'left': '5px' 
    }, 'fast'); 
});

不過，我建議創建懸停和offhover一類，並設置與這些類使用CSS選擇器而不是任何JS。只是一個小提示。

來源

2017-03-13 00:33:54

這可以通過在鏈接懸停時在角度支架上添加觸發器來使用純CSS完成。

a:hover > .tag { 
     color: orange; 
     position: relative; 
     left: 15px; 
} 
a > .tag { 
     position: relative; 
     left: 0 
} 
a > .tag, a:hover > .tag { 
     -webkit-transition: all 1s ease; 
     transition: all 1s ease 
}

的CSS >選擇器用於選擇特定的元件的所有匹配的兒童;在這種情況下，我們正在尋找作爲錨元素的直接後代的類tag的所有元素。

例子：http://jsfiddle.net/gnequ7uq/

來源

2017-03-13 00:41:16 hafiz

怎麼樣的一個整體元素改變顏色？而不僅僅是標籤？ – Source

你想改變顏色？ – hafiz

整個元素 – Source

如果你不想將移動居中文本，你必須確保span元素是跳出流程。我會相對定位它。用CSS動畫與左做到：20px的懸停：

.home_view_products a span { 
    position:relative; 
    left:0; 
    font-size: 16px; 
    padding: 5px; 
    -webkit-transition:padding-left 0.2s, color 0.2s; 
    transition:left 0.2s, color 0.2s; 
} 

#home_solutions_list li:hover span { 
    left:20px; 
    color:#636a6d; 
}

見http://jsfiddle.net/1j7dzfda/3/

來源

2017-03-13 00:56:21 xong

用於文本顏色和移動文本的css動畫，用jquery示例

回答

相關問題