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

make elements change color with button hover

本文关键字：颜色 悬停 按钮 元素      更新时间：2023-09-26

我似乎在为此苦苦挣扎。我想通过按钮悬停使其他元素更改。我试图做的是，当您将鼠标悬停在主页上的"继续阅读"按钮上时，然后标题和帖子元会改变颜色。

网站网址为：

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

您可以在更多链接上使用 hover(( 方法来触发一个函数，该函数对其兄弟姐妹应用或删除样式，例如......

$(".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 中添加一个类来定位，以确保它不会与将来某个时候可能最终出现在这些文章部分的任何其他 h2 发生冲突。

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

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

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

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

更多信息 = 更好的答案

你可以在这里看到如何做到这一点。 https://jsfiddle.net/5aybmjk7/

基本上，我只是在您的代码中添加了一个 ID/附加类，然后附加了相关的 jquery，该查询使用鼠标悬停和鼠标退出通过添加或删除附加了 CSS 的类来突出显示/取消突出显示标题。

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

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

试试看

相关文章：