Wi sh, чтобы навести курсор на контейнер, и оба элемента (изображение) и p реагируют и изменяются одновременно

Question

У меня есть <button>, который css отформатирован с помощью png как background-image и имеет ограничения width и height. Также <p> с текстом. Это на самом деле меняется, как и ожидалось. В :hover, но изображение кнопки не меняется. На :hover у меня установлен css для изменения background-position на другую часть большего изображения.

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

  /*Testing buton and id add to basket  without the anchor . so far not working*/
  /* <!-- test of https://codepen.io/anon/pen/bENBGW --> */
  .frame {
    float: left;
    width: 300px;
    min-height: 50px;
    background-color: ##00F;
    margin: 0px 10px;
    border: 1px solid black;  
  }

.frame:hover > .info > p{
    font-size: 14px;
    color:green;
}

.frame:hover > .button > img#add-to-basket1 { 
    background-position: 42px 0px;
} 
/* also tried 
.frame:hover > img#add-to-basket1 { background-position: 42px 0px;}  and
.frame:hover > #add-to-basket1 { background-position: 42px 0px;}
*/

.info {
    float: left;
    max-width: 220px;
    height: auto;
    background-color: none;
    margin-left: 20px;
    vertical-align: middle;
    line-height: 42px;
}

.info p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    color: #8F8F8F;
    margin-top: 5px;
}

img.button {
    border-radius: 100%;        
    display: inline-block;
    background-image: url('https://ggeddes.com/_media/_media/Button1_6Square.png');

    height: 42px; width: 42px;
    background-size: 85px 250px;
    text-indent: -9999px;
    line-height:42px;
    float: left;
}

#add-to-basket1 { background-position: 0px 0px;}

  
    <div class="frame">
      <img class="button" id="add-to-basket1"/>
      <div class="info">
        <p>Preparing Your Home For Showing</p>
      </div>
    </div>

Answer 1

Как-то так?

Вот проблема:

.frame:hover > .button > img#add-to-basket1 { }

Это означает, что вы ссылаетесь на img#add-to-basket1, что внутри .button на основе вашего кода. Но .button и img#add-to-basket1 относятся к одному и тому же элементу. так что вы можете удалить любой из них. в моем случае я только что удалил .button.

/*Testing buton and id add to basket  without the anchor . so far not working*/
/* <!-- test of https://codepen.io/anon/pen/bENBGW --> */
.frame {
    float: left;
    width: 300px;
    min-height: 50px;
    background-color: ##00F;
    margin: 0px 10px;
    border: 1px solid black;  
}

.frame:hover > .info > p{
    font-size: 14px;
    color:green;
}

.frame:hover > img#add-to-basket1 { 
    background-position: 42px 0px;
} 
/* also tried 
.frame:hover > img#add-to-basket1 { background-position: 42px 0px;}  and
.frame:hover > #add-to-basket1 { background-position: 42px 0px;}
*/

.info {
    float: left;
    max-width: 220px;
    height: auto;
    background-color: none;
    margin-left: 20px;
    vertical-align: middle;
    line-height: 42px;
}

.info p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    color: #8F8F8F;
    margin-top: 5px;
}

img.button {
    border-radius: 100%;        
    display: inline-block;
    background-image: url('https://ggeddes.com/_media/_media/Button1_6Square.png');

    height: 42px; width: 42px;
    background-size: 85px 250px;
    text-indent: -9999px;
    line-height:42px;
    float: left;
}

#add-to-basket1 { background-position: 0px 0px;}

<div class="frame">
  <img class="button" id="add-to-basket1"/>
  <div class="info">
    <p>Preparing Your Home For Showing</p>
  </div>
</div>