CSS - UberMenu Change Picture on :hover

0
votes

i am building a website with a mega menu (UberMenu Plugin) with wordpress.

Inside the Mega Menu I have 3 horizontal columns:

I. Column: (33,3%) vertical clickable menu elements (product-categories)

II. Column: (33,3%) Image of the Category (should change on hovering the menu elements in the I. Column)

III. Column: (33,3%) Short Description Text regarding the Category (should also change on hovering the same elements in the I. Column)

Target first Column menu element:

I tried to target the first menu element in the I. Column with the Chrome Console:

<li class="ubermenu-item ubermenu-item-type-post_type ubermenu-item-object-page ubermenu-item-523 ubermenu-item-auto ubermenu-item-normal ubermenu-item-level-4 ubermenu-column ubermenu-column-auto">
 <a class="ubermenu-target ubermenu-item-layout-default ubermenu-item-layout-text_only" href=".../verbotsschilder/">
  <span class="ubermenu-target-title ubermenu-target-text">Verbotsschilder</span>
   <span class="ubermenu-badge ubermenu-badge-inline">gestalten</span></a></li>

Also the first element in the I. Column has an ID #menu-item-523

Target the picture in the second Column:

Google Chrome:

 <li class="ubermenu-item ubermenu-item-type-custom ubermenu-item-object-custom ubermenu-item-4646 ubermenu-item-auto ubermenu-item-normal ubermenu-item-level-4 ubermenu-column ubermenu-column-auto">
  <a class="ubermenu-target ubermenu-target-with-image ubermenu-item-layout-default ubermenu-item-layout-image_above" href="#">
   <img width="100" height="100" alt="..." data-src="...Absturzgefahr.svg" class="ubermenu-image ubermenu-image-size-thumbnail ls-is-cached lazyloaded" src="...Absturzgefahr.svg">
    <noscript><img   width="100" height="100" alt="...Absturzgefahr.svg" class="ubermenu-image ubermenu-image-size-thumbnail lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img class="ubermenu-image ubermenu-image-size-thumbnail" src="...Absturzgefahr.svg" width="100" height="100" alt="..."  /></noscript>
     <span class="ubermenu-target-title ubermenu-target-text">Bild</span></a></li></ul>

Also the picture has an ID in the Uber Menu settings: #menu-item-4646

Target the third Column with text:

Google Chrome:

<li class="ubermenu-item ubermenu-item-type-custom ubermenu-item-object-custom ubermenu-item-4648 ubermenu-item-auto ubermenu-item-normal ubermenu-item-level-4 ubermenu-column ubermenu-column-auto">
 <a class="ubermenu-target ubermenu-item-layout-default ubermenu-item-layout-text_only" href="#">
  <span class="ubermenu-target-title ubermenu-target-text">Text</span>
 </a>
  <div class="ubermenu-content-block ubermenu-custom-content ubermenu-custom-content-padded">Text for the first menu element</div>
</li>

Also the Text in the third Column has a given ID from UberMenu plugin: #menu-item-4648

Now i want to Change the image in the second Column and also the Text in the third Column when hovering over the menu element in the first Column. I have played around and tried several Codes but none of them are working.

I am new to programming so every help is very appreciated!!!

htmlcsswordpresswoocommerce