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 {}

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

如何更改css阅读更多按钮

1 个答案: