Question

作为自定义WordPress循环的一部分，我有以下行通过嵌入式CSS将帖子缩略图称为背景。我希望背景缩略图在悬停时发生变化。

<div style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'>

尝试通过混合我发现的答案

How to write a:hover in inline CSS?

https://wordpress.stackexchange.com/questions/220029/how-to-get-the-first-image-gallery-of-a-product-in-woocommerce-in-a-loop

<div onMouseOut="this.style.background-image='url(<?php echo get_the_post_thumbnail_url(); ?>);'" onMouseOver="this.style.background-image='url(<?php global $product; $attachment_ids = $product->get_gallery_attachment_ids(); echo $image_link = wp_get_attachment_url( $attachment_id ); ?>);'">

Answer 1

您可以尝试：

<div script="this.addEventListener("mouseover", this.style.backgroundImage='url(<?php echo get_the_post_thumbnail_url(); ?>);');>

然后将事件侦听器更改为“ mouseout”并更改URL链接。

Answer 2

借助Misorude的评论，我设法获得了我所追求的效果。添加[“ property-name”]语法https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation，然后更正其他几种语法的位置。

单引号'必须在分号之前;

重新添加原始的内联样式。

并更正wp_get_attachment_url($attachment_ids)以仅调用第一个缩略图

<div style='background-image: url(
   <?php   /// first inline style
echo get_the_post_thumbnail_url();
?>);' onMouseOut="this.style['background-image']='url(
   <?php /// Return to Original Position
echo get_the_post_thumbnail_url();
?>)';" onMouseOver="this.style['background-image']='url(
   <?php /// Hover Effect
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
echo $image_link = wp_get_attachment_url($attachment_ids[0]);
?>
  )';">

悬停时内联样式背景更改

2 个答案: