使用按钮悬停使元素改变颜色

Question

我似乎正在为此苦苦挣扎。我想让其他元素随着按钮悬停而改变。我想做的是，当您将鼠标悬停在主页上的 "continue reading" 按钮上时，标题和 post 元数据会更改颜色。

站点 url 是：

http://staging.conversationlab.com/lions_valley/

Answer 1

您可能只需要添加一些 css:

<style>
#buttonid:hover {
    background-color:#ff0000;
}
</style>

#buttonid 在您的按钮上声明的位置：

<button id="buttonid"> my button</button>

更多信息 = 更好 answer/s

Answer 2

您可以使用 hover() method on the more links to trigger a function that applies or removes styling to their siblings 比如...

$(".more-link").hover(
  function() {
    $(this).addClass("your-class-with-styling");
    $(this).siblings(".post-meta").addClass("your-class-with-styling");
    $(this).siblings("h2").addClass("your-class-with-styling");
  },
  function() {
    $(this).removeClass("your-class-with-styling");
    $(this).siblings(".post-meta").removeClass("your-class-with-styling");
    $(this).siblings("h2").removeClass("your-class-with-styling");    
  }
);

不过，我可能会在目标 h2 中添加一个 class，以确保它不会与将来某个时候可能出现在这些文章部分中的任何其他 h2 发生冲突.

Answer 3

您可以在此处查看操作方法。 https://jsfiddle.net/5aybmjk7/

基本上，我只是在您的代码中添加了一个 ID / 附加 class，然后通过添加或删除 highlight/unhighlight 将使用鼠标悬停和鼠标移出的相关 jquery =18=] 附有 CSS。

$('#here').mouseover(function () {
    $(".highlightMe").addClass('colored');
});

$('#here').mouseout(function () {
    $(".highlightMe").removeClass('colored');
});

Answer 4

jQuery('.et_pb_posts article').find('.more-link').on('hover', function() {
    jQuery(this).find('.post-meta a').addClass('YOUR_CLASS')
});

试试看

使用按钮悬停使元素改变颜色

make elements change color with button hover

javascript

jquery

hover