Как при наведении заставить работать 2 класса

@barzini · Регистрация: 15.01.2017

Author24 — интернет-сервис помощи студентам

есть 2 класса

CSS

.colorfont:hover  {
            text-shadow: 1px 1px 1px #3985cc,  0 0 1em gray; /* Параметры тени */
            -webkit-filter: brightness(100%);
            -webkit-transform: scale(1.1);
           -moz-transform: scale(1.1);
           -o-transform: scale(1.1);
            }
 
.photonav:hover {
               -webkit-filter: brightness(120%);
                  border: 2px solid #acacac;
                  box-shadow: inset 0 0 0 23px #53ea93;
                  -webkit-transform: scale(1.1);
                 -moz-transform: scale(1.1);
                 -o-transform: scale(1.1);
                    }

есть картинка и рядом текст, при наведении на картинку - она принимает свойства .photonav:hover
при наведении на текст - она принимает свойства .colorfont:hover
как сделать, что бы при наведении на картинку или текст, оба класса одновременно работали (при наведении на картинку, текст принимал свойства класса(свои) и наоборот при наведении на текст). Не смог загуглить это. Заранее спасибо.

@AlexZaw · 11.07.2019, 19:30

barzini, сделайте общую обертку для текста и картинки и при hover на обертке меняйте стили как вам угодно

@barzini · 11.07.2019, 19:33 **[ТС]**

Так текст и картинка имеют некоторые разные свойства. Один принимает boxshadow, а другой нет. Я хочу заставить сработать сразу 2 класса, при работающем одном. Такое невозможно разве сделать?

@aj17 · 11.07.2019, 19:56

HTML5

<div class="box">
   <p>
    Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вершину агентство то рукописи, родного осталось мир грамматики скатился сбить, переписали злых, своих все раз имеет меня. Океана, свой взобравшись?
  </p>
  <img src="https://www.placehold.it/240" alt="">
</div>

CSS

.box{
  display: flex;
  width: 800px;
}
 
.box img{
  border: 2px solid transparent;
}
 
.box p{
  order: 1;
  margin-left: 20px;
}
 
.box p:hover ~ img{
  border: 2px solid red;
  box-shadow: 0 0 10px #000;
}
 
.box img:hover{
  box-shadow: 0 0 10px #000;
}

@barzini · 11.07.2019, 20:09 **[ТС]**

у вас при наведении на текст применяются к квадрату класса. Но к самому тексту не приминяются свойства. Как сделать, что бы к квадрату и тексту одновременно приминялись разные классы. В один класс не могу засунуть, так как разные свойста в них.

@aj17 · 11.07.2019, 20:13

Ну емае, допишите селектор, что вы в самом то деле...

CSS

1	.box p:hover {color: red;}

@AlexZaw · 11.07.2019, 20:14

Сообщение от barzini

Один принимает boxshadow, а другой нет.

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

HTML5

<div class="wrap">
  <img src="http://placekitten.com/200">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus nulla veniam ad eum eveniet dignissimos consequatur dolore, commodi repellendus corrupti obcaecati vero fugiat quaerat maiores neque temporibus perspiciatis ipsum minus?</p>
</div>

CSS

.wrap{
  max-width: 400px;
}
img{
  float: left;
}
.wrap:hover img {
  filter: brightness(120%);
  border: 2px solid #acacac;
  box-shadow: 0 0 0 23px #53ea93;
  transform: scale(1.1);
}
.wrap:hover p {
  text-shadow: 1px 1px 1px #3985cc, 0 0 1em gray;
  filter: brightness(100%);
  transform: scale(1.1);
}

Если по разметке не подходит то можно использовать js

@AlexZaw Модератор 2275 / 1656 / 650 Регистрация: 07.08.2016 Сообщений: 3,970
	11.07.2019, 19:30	2
	barzini, сделайте общую обертку для текста и картинки и при hover на обертке меняйте стили как вам угодно 0

@barzini 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 19
	11.07.2019, 19:33 [ТС]	3
	Так текст и картинка имеют некоторые разные свойства. Один принимает boxshadow, а другой нет. Я хочу заставить сработать сразу 2 класса, при работающем одном. Такое невозможно разве сделать? 0

@barzini 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 19
	11.07.2019, 20:09 [ТС]	5
	у вас при наведении на текст применяются к квадрату класса. Но к самому тексту не приминяются свойства. Как сделать, что бы к квадрату и тексту одновременно приминялись разные классы. В один класс не могу засунуть, так как разные свойста в них. 0

	11.07.2019, 20:14

Как при наведении заставить работать 2 класса

Решение