Графика/Дизайн | вопрос по direction: rtl;
bazcms
делаю голосование на сайте в виде звездочек,
но когда навожу мышку
ховер трансформируется с право на лево,
добавил direction: rtl; то всее норально, но только ссылки стали зеркальными,
где было +1 +2 +3 +4 +5
а стало +5 +4 +3 +2 +1
как еже можно сделать что бы ховер был с право на лево? а ссылки были в своем порядке?
вот пример https://codepen.io/Bilal1909/pen/WNGXeQG
но когда навожу мышку
ховер трансформируется с право на лево,
добавил direction: rtl; то всее норально, но только ссылки стали зеркальными,
где было +1 +2 +3 +4 +5
а стало +5 +4 +3 +2 +1
как еже можно сделать что бы ховер был с право на лево? а ссылки были в своем порядке?
вот пример https://codepen.io/Bilal1909/pen/WNGXeQG
pyrokinesis , direction: ltr;
Sovet , пробовал уже не ромогло
pyrokinesis (12 окт 2023, в 13:41)делаю голосование на сайте в виде звездочек,
но когда навожу мышку
ховер трансформируется с право на лево,
добавил direction: rtl; то всее норально, но только ссылки стали зеркальными,
где было +1 +2 +3 +4 +5
а стало +5 +4 +3 +2 +1
как еже можно сделать что бы ховер был с право на лево? а ссылки были в своем порядке?
вот пример https://codepen.io/Bilal1909/pen/WNGXeQG
php
<div class="star-wrapper"> <a href="#" class="fas fa-star s1"></a> <a href="#" class="fas fa-star s2"></a> <a href="#" class="fas fa-star s3"></a> <a href="#" class="fas fa-star s4"></a> <a href="#" class="fas fa-star s5"></a> </div> <script src="https://kit.fontawesome.com/5ea815c1d0.js"></script> <div class="wraper"> <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="gitlabBilal" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff"></script> </div> <style> * { margin: 0; padding: 0; box-sizing: border-box; background: #353b48; } .star-wrapper { top: 50%; left: 50%; transform: translate(-50%, -50 
; position: absolute; } .star-wrapper a { font-size: 4em; color: #fff; text-decoration: none; transition: all 0.5s; margin: 4px; display: inline-block; /* Добавлено */ } .star-wrapper a:hover { color: gold; transform: scale(1.3); } .s1:hover ~ a { color: gold; } .s2:hover ~ a { color: gold; } .s3:hover ~ a { color: gold; } .s4:hover ~ a { color: gold; } .s5:hover ~ a { color: gold; } .star-wrapper a[class^="s"] { direction: rtl; } .wraper { position: absolute; bottom: 30px; right: 50px; } </style> 
[i] [!] (12 окт 2023, в 17:08)Пробуй
php
<div class="star-wrapper"> <a href="#" class="fas fa-star s1"></a> <a href="#" class="fas fa-star s2"></a> <a href="#" class="fas fa-star s3"></a> <a href="#" class="fas fa-star s4"></a> <a href="#" class="fas fa-star s5"></a> </div> <script src="https://kit.fontawesome.com/5ea815c1d0.js"></script> <div class="wraper"> <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="gitlabBilal" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff"></script> </div> <style> * { margin: 0; padding: 0; box-sizing: border-box; background: #353b48; } .star-wrapper { top: 50%; left: 50%; transform: translate(-50%, -50 ; position: absolute; } .star-wrapper a { font-size: 4em; color: #fff; text-decoration: none; transition: all 0.5s; margin: 4px; display: inline-block; /* Добавлено */ } .star-wrapper a:hover { color: gold; transform: scale(1.3); } .s1:hover ~ a { color: gold; } .s2:hover ~ a { color: gold; } .s3:hover ~ a { color: gold; } .s4:hover ~ a { color: gold; } .s5:hover ~ a { color: gold; } .star-wrapper a[class^="s"] { direction: rtl; } .wraper { position: absolute; bottom: 30px; right: 50px; } </style> [i] [!] (12 окт 2023, в 17:08)Пробуй
php
<div class="star-wrapper"> <a href="#" class="fas fa-star s1"></a> <a href="#" class="fas fa-star s2"></a> <a href="#" class="fas fa-star s3"></a> <a href="#" class="fas fa-star s4"></a> <a href="#" class="fas fa-star s5"></a> </div> <script src="https://kit.fontawesome.com/5ea815c1d0.js"></script> <div class="wraper"> <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="gitlabBilal" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff"></script> </div> <style> * { margin: 0; padding: 0; box-sizing: border-box; background: #353b48; } .star-wrapper { top: 50%; left: 50%; transform: translate(-50%, -50 ; position: absolute; } .star-wrapper a { font-size: 4em; color: #fff; text-decoration: none; transition: all 0.5s; margin: 4px; display: inline-block; /* Добавлено */ } .star-wrapper a:hover { color: gold; transform: scale(1.3); } .s1:hover ~ a { color: gold; } .s2:hover ~ a { color: gold; } .s3:hover ~ a { color: gold; } .s4:hover ~ a { color: gold; } .s5:hover ~ a { color: gold; } .star-wrapper a[class^="s"] { direction: rtl; } .wraper { position: absolute; bottom: 30px; right: 50px; } </style> 
System css
* { margin: 0; padding: 0; box-sizing: border-box; background: #353b48; } .star-wrapper { top: 50%; display: flex; left: 50%; transform: translate(-50%, -50 ; position: absolute; flex-direction: row-reverse; } .star-wrapper a { font-size: 4em; color: #fff; text-decoration: none; transition: all 0.5s; margin: 4px; } .star-wrapper a:hover { color: gold; transform: scale(1.3); } .s1:hover ~ a { color: gold; } .s2:hover ~ a { color: gold; } .s3:hover ~ a { color: gold; } .s4:hover ~ a { color: gold; } .s5:hover ~ a { color: gold; } .wraper { position: absolute; bottom: 30px; right: 50px; } ________
посл. ред. 13.10.2023 в 14:39; всего 2 раз(а); by System