Как с помощью скрипта скрыть только половину изображения?

Question

У меня есть img на странице с классом .ff-og-image-inserted. Мне нужен сценарий для вставки другого класса .container-closed, чтобы скрыть часть этого изображения с классом .ff-og-image-inserted

То, что я пробовал:

$(".ff-og-image-inserted").addClass("container-closed");

.ff-og-image-inserted {
  overflow: auto;
  height: auto;
}

.ff-og-image-inserted>container-closed {
  overflow: hidden;
  width: 470px;
  height: 80px;
  background-color: black;
}

<div><img src="link.jpg" class="ff-og-image-inserted" /></div>

Мой вопрос: Почему этот код не работает? Я понимаю, что могут быть другие решения, но мне действительно нужно прежде всего знать, почему это решение не работает, поэтому, пожалуйста, предложения, связанные с этим решением, а не с другими решениями.

Дополнительная информация: я вижу, что изображение получает класс .container-closed, но css вообще не применяется. Я хочу добавить класс к самому изображению, потому что родительский div изображения не имеет класса или идентификатора, и я не могу это изменить, поскольку это автоматически опубликованные изображения.

Thnx

Answer 1

Вы используете селектор >, что означает «прямой потомок ( ссылка )»:

.ff-og-image-inserted > container-closed {

Это должно быть просто:

.ff-og-image-inserted.container-closed {

Поскольку вы хотите применить атрибут overflow к родительскому контейнеру, а не к самому изображению.

//

OP хотел добавить класс к img вместо него родитель:

$('.ff-og-image-inserted').parent().addClass('container-closed');