Изменения на изображении парить

Question

Благодаря большому парню, я обнаружил сегодня возможность изменения цвета текста при наведении на DIV таким образом:

div.button:hover span { 
 
    color: rgb(88, 202, 230); 
 
}

<div class='button'> 
 
    <div class='svg bookmarks'></div> 
 
    <span class=''>Bookmarks</span> 
 
    </div>

И бит позже я попытался реализовать такую ​​функциональность поверх изображения, но результат не достигнут, можете ли вы объяснить, что сделано неправильно и, возможно, разница между случаями.

img.button:hover p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>

Answer 1

попробуйте добавить ~

img.button:hover ~ p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>

Answer 2

Используйте селектор + CSS:

img.button:hover + p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>

Answer 3

Ваш селектор является неправильным, потому что пункт не является ребенком образа. Используя общий контейнер будет исправить:

.c:hover p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<div class="c"> 
 
    <img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p> 
 
</div>

Answer 4

В селекторе CSS, пространство значит «является дочерним », поэтому способ, которым работает ваш селектор, говорит, что когда тег img с« кнопкой »класса завис, выберите дочерний p тег с текстом класса и изменить цвет.

Вместо этого используйте смежный селектор родственный (+), чтобы сказать, что это родной брат, а не ребенок

img.button:hover + p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>