bymas.ru | вопрос по direction: rtl;

KATSTAT.RU-ТОП РЕЙТИНГ САЙТОВ С ОТДАЧЕЙ
Уникальная онлайн игра! ЗАЙДИ И ОЦЕНИ!
www.Add.Az WEB MASTER PLATFORMA, FORUM
Пиратская ферма, заходи, новичок
Добро пожаловать
WorldByte - Наш хостинг - партнер

Топ дня:

AlertWeb

делаю голосование на сайте в виде звездочек,
но когда навожу мышку
ховер трансформируется с право на лево,

добавил 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

Пробуй

<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)
Пробуй

<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)
Пробуй

<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>

не помогло

* {

   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

Онлайн: 4