Как сделать появление ссылки при наведении на картинку?

Question

[Al Sm]

Здравствуйте. Есть картинка с аватаром class="ava-img" и ниже расположена ссылка с class="change-ava". Как сделать, чтобы при наведении на картинку появлялся текст ссылки?
Вот код из страницы:

<div>
<a class="ava-img" href="/"><?php bp_loggedin_user_avatar( 'type=full' ); ?></a>
<span class="change-ava"><a href="<?php echo bp_loggedin_user_domain() ?>profile/change-avatar/">Change avatar</a></span>

Вот что пишу в CSS:

.ava-img{display: block;}
.change-ava{position: absolute;display: none;}
.ava-img.change-ava:hover{display: block;}

Подскажите пожалуйста, что я делаю не так?

Answer 1

[winbackgo]

1. div:hover .change-ava {display: block}
2. .ava-img:hover ~ .change-ava {display: block}

Comments

[Al Sm]

Второй способ не срабатывает, а первый как то странно работает, но направление мысли я понял, спасибо!

[winbackgo]

Странно что у вас не работает. https://jsfiddle.net/bkr85ejc/4/

[mr_dev1l]

winbackgo: один только минус, нет возможности непосредственно нажать на смену аватара)Поэтому правильный вариант будет только первый

[Al Sm]

mr_dev1l: а если сдвинуть текст на картинку?

[Al Sm]

winbackgo: Еще раз спасибо вам большое, буду разбираться!

[Al Sm]

попробовал, какое то странное поведение у ссылки

[winbackgo]

mr_dev1l: ну само собой, вопрос то состоял в другом). Правильнее всего, конечно же, это сделать в блоке (первый вариант).

[Al Sm]

winbackgo: просто мною был некорректно поставлен вопрос изначально:)

Answer 2

[romy4]

загвоздка здесь: .ava-img:hover .change-ava
найдите в документации, как обращаться к соседним элементам

Comments

[Al Sm]

.change-ava.ava-img:hover{display: block;} ? Тоже не работает :(