Inline стиль фона смена при наведении

Question

Как часть пользовательского цикла WordPress, у меня есть следующая строка, которая вызывает миниатюру записи в качестве фона с помощью встроенного CSS. Я хочу, чтобы при наведении курсора фоновая картинка менялась.

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

Пытался сделать это со смешиванием ответов, которые я нашел

Как написать: hover во встроенном 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

С помощью комментариев Мисоруда мне удалось получить эффект, к которому я стремился. Добавление синтаксиса ["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]);
?>
  )';">

Answer 2

Не могли бы вы попробовать:

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

Затем измените прослушиватель событий на «mouseout» и измените ссылку URL.