html - 如何更改CSS阅读更多按钮

Question

我想通过添加悬停来更改阅读更多按钮样式。 我尝试了一些 CSS，例如:

a:hover{
  background-color: #077fad;
  color: #ffffff;
}

或

div.blmore.rmbutton-center.rmbutton-medium:hover{
  background-color: #077fad;
  color: #ffffff;
}

但是第一种方法也发生了变化<a>在<h2>里面段落和另一个将悬停添加到整个阅读更多按钮部分，阅读更多按钮除外。

我的问题是如何选择 <a>里面<div class="blmore rmbutton-center rmbutton-medium">段落以及如何仅将悬停效果应用于该部分？

<div id="bloglist_title">
    <h2 class="entry-title">
    <a href="my.website.link.com">Title</a>
    </h2>
</div>
<div class="entry-content">
    <div class="myleft">
    <a class="entry-post-thumbnail left" style etc.....></a>
<p>
Short text
</p>
<div id="bloglist_morebutton">
    <div class="blmore rmbutton-center rmbutton-medium">
        <a style="background-color: #fdc550; border-radius: 5px;"href="my.website.link.com">Read more</a>
    </div>
</div>
</div>

Answer 1

/* gets applied to any hovered <a> on the page */
.a:hover {}

/* gets applied to an hovered <a> on the page
   within the given class combination */
.blmore.rmbutton-center.rmbutton-medium a:hover {}

/* gets applied to any <a> within an hovered
   element of the given class combination */
.blmore.rmbutton-center.rmbutton-medium:hover a {}

关键是两个类或元素之间的空白，它允许您表示标记的嵌套。