Javascript-форум (https://javascript.ru/forum/)
-   Серверные языки и технологии (https://javascript.ru/forum/server/)
-   -   javascript таблици (https://javascript.ru/forum/server/78407-javascript-tablici.html)

misha.korolcov 09.09.2019 20:42

javascript таблици
 
доброе время суток у меня есть таблица сделана не табами а div и row и надо чтобы при наведении на один ряд менялись картинки в нeм , я знаю как сделать при наведении на одну div или элемент а как сделать при наведении на ряд элементов в таблице чтоб менялась целий ряд или строка зарание спб

рони 09.09.2019 20:54

misha.korolcov,
может html и css для примера?

misha.korolcov 09.09.2019 23:17

https://github.com/mishakorolcov1/table

рони 09.09.2019 23:22

misha.korolcov,
Цитата:

Вы опубликовали очень много кода.

Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему.

Спасибо.


misha.korolcov 09.09.2019 23:38

Вложений: 1
<div class="content-block ">

      <div class="account-table">
          <div class="container ">
              <div class="row text-center my-3">
                  <div class="col-4">
                  </div>
                  <div class="col-2 mx-3">
                      <b>MINI</b>
                  </div>
                  <div class="col-2 mx-3">
                      <b>ClASSIC</b>
                  </div>
                  <div class="col-2 mx-3">
                      <b>PREMIUM</b>
                  </div>
              </div>
              <div class="row text-center my-3">
                  <div class="col-4">

                  </div>
                  <div class="col-2 mx-3">
                      Basic Trading For
                      Beginners
                  </div>
                  <div class="col-2  mx-3">
                      CLASSIC For Skilled
                      Investors
                  </div>
                  <div class="col-2 mx-3">
                      PREMIUM Advanced Trading
                      For Experienced Investors
                  </div>
              </div>

              <div class="row text-center my-2">
                  <div class="col-4">

                  </div>
                  <div class="col-2 mx-3">
                      <b>$500</b>
                  </div>
                  <div class="col-2 mx-3">
                      <b>$5 000</b>
                  </div>
                  <div class="col-2 mx-3">
                      <b>$20 000</b>
                  </div>
              </div>
              <div class="row my-2 mt-5">
                  <div class="col-4 ">
                      Online Chat Support
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2">
                  <div class="col-4 ">
                      Platforms: MT4﹠Mobile
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2">
                  <div class="col-4 ">
                      Instruments: Forex, CFDs﹠Commodities
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2">
                  <div class="col-4 ">
                      Free E-book
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2">
                  <div class="col-4 ">
                      Individual Competitive Spreads﹠Commissions
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2 ">
                  <div class="col-4 ">
                      Access to Breaking News﹠ Market Research
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2 ">
                  <div class="col-4 ">
                      Online Phone Support
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2 ">
                  <div class="col-4 ">
                      Real-Time Trading Signals
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2 ">
                  <div class="col-4 ">
                      Real-Time Trading Signals
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2 ">
                  <div class="col-4 ">
                      Account Executive Team Available
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2 ">
                  <div class="col-4 ">
                      24/7
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>
              <div class="row my-2 ">
                  <div class="col-4 ">
                      Trade Mentor
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector3.png" alt="Vector">
                  </div>
                  <div class="col-2 text-center mx-3">
                      <img src="img/Vector.png" alt="Vector">
                  </div>
              </div>

              <div class="row my-5  ">
                  <div class="col-4 ">

                  </div>
                  <div class="col-2 text-center mx-3">
                      <a href="https://client.bubblext.com/register"> OPEN ACCOUNT </a>
                  </div>
                  <div class="col-2 text-center mx-3">
                      <a href="https://client.bubblext.com/register"> OPEN ACCOUNT </a>
                  </div>
                  <div class="col-2 text-center mx-3">
                      <a href="https://client.bubblext.com/register"> OPEN ACCOUNT </a>
                  </div>
              </div>
      </div>

рони 09.09.2019 23:49

misha.korolcov,
может ...
.row:hover .text-center {
       background-color: #FF0000;
   }

misha.korolcov 10.09.2019 00:25

спс но мне нужно чтоб при наведении на целий ряд менялась картинка bg color ,2-3 понятно через hover в css а вот как зделать чтоб менялась картинка везде менялась а не тока в одном dive у я слишал что можна както связивать их )

рони 10.09.2019 00:30

misha.korolcov,
возможно кто-то другой вам поможет ...

andrey123321 24.12.2019 14:19

что то вроде этого (не проверял):
картинки .hidehover класс дать
.row:hover img.hidehover {
display: none;
}


Часовой пояс GMT +3, время: 07:30.