Как задать :hover для самого элемента?

Question

[Nik Faraday]

Здравствуйте!

Не могу нигде найти, как задать :hover для самого тега, а не через css стиль. Подскажите, пожалуйста, как это сделать?

Answer 1

[Сергей Соколов]

Никак.

Только через таблицу стилей.
Или имитировать, обрабатывая события JavaScript'ом.

Отчего бы не назначать один из трёх классов налету:

switch (Model[i].Type) {
  case EventType.Call:
    className = 'my-class-call';
    break;
  case EventType.Meeting:
    className = 'my-class-meeting';
    break;
  // ...
}

<a class="@className" id="user-event-@i" href="@Url.Action("Details", "Event", new { @id = @Model[i].Id })">
  <div style="width: 100%; min-height: 110px; border-top: 2px solid #CFCED1; border-left: 1px solid #CFCED1; border-right: 1px solid #CFCED1; background-color: @backgroundColor; cursor: pointer;">
  </div>
</a>

И определить однажды в начале стили

.my-class-call { ... }
.my-class-call:hover { ... }

.my-class-meeting { ... }
.my-class-meeting:hover { ... }

Comments

[Nik Faraday]

Хммм... Ну, через таблицу стилей мне не подходит, поскольку я не могу адекватно выбрать селекторы для элементов. Не могли бы вы мне с этим помочь?

Есть у меня вот такой фрагмент код:

@for (int i = 0; i < Model.Count; i++)
        {
            <div class="col-sm-3" style="margin-bottom: 5px;">
                @{
                    string backgroundColor = Constants.Colors.EVENT_CUSTOM_TYPE;
                    string hoverColor = Constants.Colors.EVENT_CUSTOM_BACKGROUND;

                    switch (Model[i].Type)
                    {
                        case EventType.Call:
                            {
                                backgroundColor = Constants.Colors.EVENT_CALL_TYPE;
                                hoverColor = Constants.Colors.EVENT_CALL_BACKGROUND;
                                break;
                            }
                        case EventType.Meeting:
                            {
                                backgroundColor = Constants.Colors.EVENT_MEETING_TYPE;
                                hoverColor = Constants.Colors.EVENT_MEETING_BACKGROUND;
                                break;
                            }
                        case EventType.Process:
                            {
                                backgroundColor = Constants.Colors.EVENT_PROCESS_TYPE;
                                hoverColor = Constants.Colors.EVENT_PROCESS_BACKGROUND;
                                break;
                            }
                    }
                }

                <a id="user-event-@i" href="@Url.Action("Details", "Event", new { @id = @Model[i].Id })">
                    <div style="width: 100%; min-height: 110px; border-top: 2px solid #CFCED1; border-left: 1px solid #CFCED1; border-right: 1px solid #CFCED1; background-color: @backgroundColor; cursor: pointer;">
                    </div>
                </a>
            </div>
        }

Мне для каждого тега "а" нужно вставить свой hover в соответствии от цвета заднего фона блока + выборка по элемента (Она примерно такая вот:

a[id|=user-event]:hover {
...
}

)

[Сергей delphinpro]

Nik Faraday,

<a class="my-link" style="--hover-bg: red">Link</a>
<a class="my-link" style="--hover-bg: green">Link</a>
<a class="my-link" style="--hover-bg: blue">Link</a>

.my-link:hover {
  background-color: var(--hover-bg, #000);
}

[Сергей Соколов]

Nik Faraday, отчего бы не назначать один из трёх классов налету:

switch (Model[i].Type) {
  case EventType.Call:
    className = 'my-class-call';
    break;
  case EventType.Meeting:
    className = 'my-class-meeting';
    break;
  // ...
}

<a class="@className" id="user-event-@i" href="@Url.Action("Details", "Event", new { @id = @Model[i].Id })">
  <div style="width: 100%; min-height: 110px; border-top: 2px solid #CFCED1; border-left: 1px solid #CFCED1; border-right: 1px solid #CFCED1; background-color: @backgroundColor; cursor: pointer;">
  </div>
</a>

И определить однажды в начале стили

.my-class-call { ... }
.my-class-call:hover { ... }

.my-class-meeting { ... }
.my-class-meeting:hover { ... }

[Nik Faraday]

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