Таблица начальной загрузки, наведите курсор на ячейку, чтобы изменить цвет фона ВСЕХ ячеек - PullRequest
Новая
       4

Таблица начальной загрузки, наведите курсор на ячейку, чтобы изменить цвет фона ВСЕХ ячеек

0 голосов
/ 11 октября 2018

У меня есть таблица начальной загрузки: 

<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

<div class="container-fluid h-100">
    <div class="row float-right align-items-center" style="height: 5%;">
        <div class="col-12">
            langs
        </div>
    </div>

    <div class="row w-100 text-center align-items-center" style="height: 85%;">
        <div class="col-md-5">
            hover1
        </div>
        <div class="col-md-2">
            todo img
        </div>
        <div class="col-md-5">
            hover2
        </div>
    </div>

    <div class="row text-center align-items-center" style="height: 5%;">
        <div class="col-12">
            text end
        </div>
    </div>

</div>

</body>

Я хотел бы знать, когда я наведу курсор на «hover1» div, если возможно изменить весь фон таблицы на «черный», используя CSS, javascript, jQueryи HTML.

До сих пор я пытался сделать CSS с наследственным классом, например: .homeLeft:hover + .homeRight{}, но он не работает, так как я изменил его на таблицу начальной загрузки.

Любая помощь / советы будут оценены.

1 Ответ

0 голосов
/ 11 октября 2018

Попробуйте что-то вроде этого: 

.parent-hover {  
    pointer-events: none;
}

.child-hover {
    pointer-events: auto;
}

.parent-hover:hover {
    background: yellow;
}  
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100 parent-hover">
    <div class="row float-right align-items-center" style="height: 5%;">
        <div class="col-12">
            langs
        </div>
    </div>

    <div class="row w-100 text-center align-items-center" style="height: 85%;">
        <div class="col-md-5 child-hover">
            hover1
        </div>
        <div class="col-md-2">
            todo img
        </div>
        <div class="col-md-5">
            hover2
        </div>
    </div>

    <div class="row text-center align-items-center" style="height: 5%;">
        <div class="col-12">
            text end
        </div>
    </div>

</div>

Если вы хотите, чтобы несколько детей изменили родительский цвет на другой, вам, вероятно, придется использовать javascript: 

$(function(){
  function changeTableColor(color) {
    $(".parent").css("background-color", color);
  }

  $(".child-hover1").hover(function(){changeTableColor("yellow");});
  $(".child-hover2").hover(function(){changeTableColor("red");});
  
  $(".child-hover1").on("mouseleave", function(){changeTableColor("");});
  $(".child-hover2").on("mouseleave", function(){changeTableColor("");});
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100 parent">
    <div class="row float-right align-items-center" style="height: 5%;">
        <div class="col-12">
            langs
        </div>
    </div>

    <div class="row w-100 text-center align-items-center" style="height: 85%;">
        <div class="col-md-5 child-hover1">
            hover1
        </div>
        <div class="col-md-2">
            todo img
        </div>
        <div class="col-md-5 child-hover2">
            hover2
        </div>
    </div>

    <div class="row text-center align-items-center" style="height: 5%;">
        <div class="col-12">
            text end
        </div>
    </div>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...