通过按钮悬停使元素改变颜色

Question

I seem to be struggling with this. Im want to make other elements change with button hover. what im trying to do is , when you hover on the "continue reading" button on the homepage , then for the title and post meta to change color.

The site url is:

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

Answer 1

You probably just need to add some css:

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

where the #buttonid is declared on your button:

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

more info = better answer/s

Answer 2

You can use the hover() method on the more links to trigger a function that applies or removes styling to their siblings like...

$(".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");    
  }
);

I would probably add a class to the h2 to target, though, to make sure that it wouldn't conflict with any other h2s that MAY end up in those article sections at some point in the future.

Answer 3

You can see here how to do it. https://jsfiddle.net/5aybmjk7/

Basically I just added an ID / additional class to your code and then attached the relevant jquery that used mouseover and mouseout to highlight/unhighlight the title by adding or removing a class with CSS attached to it.

$('#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')
});

Try that