html - 如何将鼠标悬停在我的链接图像上？ (它们是 Wordpress 帖子中的图标)

Question

如何将鼠标悬停在我的链接图像上？ (它们是 Wordpress 帖子中的图标)

这是在 Wordpress 帖子中创建的代码。

<p>
    <a href="https://www.pinterest.com/meganpolk/?eq=miss&amp;etslf=2961">
        <img class="alignnone size-full wp-image-739" src="http://misspsstyle.com/wp-content/uploads/2018/05/SM-Icons_01.png" alt="Miss P's Style on Pinterest" width="72" height="72" />
    </a>
    <a href="https://www.facebook.com/MissPsStyle/">
        <img class="alignnone size-full wp-image-740" src="http://misspsstyle.com/wp-content/uploads/2018/05/SM-Icons_02.png" alt="Miss P's Style on Facebook" width="72" height="72" />
    </a>
    <a href="https://www.instagram.com/missps_style/">
        <img class="alignnone size-medium wp-image-741" src="http://misspsstyle.com/wp-content/uploads/2018/05/SM-Icons_03.png" alt="Miss P's Style on Instagram" width="72" height="72" />
    </a>
</p>

Answer 1

要为将鼠标悬停在其中一张图片上时出现的效果添加效果，只需使用 CSS 的伪类 :hover，如下所示:

img:hover {
  background-color: blue; /** This is just to show how it works. Replace the content of this rule with your own styles */
}

<p>
  <a href="https://www.pinterest.com/meganpolk/?eq=miss&amp;etslf=2961">
    <img class="alignnone size-full wp-image-739" src="http://misspsstyle.com/wp-content/uploads/2018/05/SM-Icons_01.png" alt="Miss P's Style on Pinterest" width="72" height="72" />
  </a>
  <a href="https://www.facebook.com/MissPsStyle/">
    <img class="alignnone size-full wp-image-740" src="http://misspsstyle.com/wp-content/uploads/2018/05/SM-Icons_02.png" alt="Miss P's Style on Facebook" width="72" height="72" />
  </a>
  <a href="https://www.instagram.com/missps_style/">
    <img class="alignnone size-medium wp-image-741" src="http://misspsstyle.com/wp-content/uploads/2018/05/SM-Icons_03.png" alt="Miss P's Style on Instagram" width="72" height="72" />
  </a>
</p>