Question 50016 in Javascript Question posted in
A very good W3school tutorial can be found here.

Changing Icon url with javascript based on mouseevent

I cannot figure out how to make my navigation hover effect work. If you visit this site: https://sw6.boxolutions.de/ you will see the issue. I am trying to change my navigation icons on hover. Therefore i tried to add html properties onmouseover() and onmouseout() to my a tags. These functions are made to change the background url attribute of my wrapper-naviagtion-iconsbased on mouseevent. Somehow it is not working.

<a class="nav-link main-navigation-link"
               href="{{ category_url(category) }}"
               itemprop="url"
               onmouseenter="hover()"
               onmouseleave="unhover()"
               {% if treeItem.children|length > 0 %}data-flyout-menu-trigger="{{ category.id }}"{% endif %}
                    {% if category_linknewtab(category) %}target="_blank"{% endif %}
               title="{{ name }}">
                <div class="main-navigation-link-text">
                    {# ThemeWare: Add navigation Icons - no hover #}
                    <div class="container">
                        <div class="wrapper-navigation-container">
                            <div class="wrapper-naviagtion-icons"
                                style="background: url({{category.customFields.twt_modern_pro_custom_field_set__category_navigation_icon_desktop_url}}) no-repeat;">
                            </div>
                        </div>
                        {% set navigation_split_title = name|split('&') %}
                        <div class="wrapper-naviagtion-text-links">
                            <span itemprop="name"><b>{{ navigation_split_title[0]|upper }}</b></span></br>
                            <span itemprop="name">{{ navigation_split_title[1]|upper }}</span>
                        </div>
                    </div>
                </div>

                <script>
                    function hover() {
                        document.querySelector(".wrapper-naviagtion-icons").style.backgroundImage = "url{{category.customFields.twt_modern_pro_custom_field_set__category_navigation_icon_desktop_url_hover}}";
                    }

                    function unhover() {
                        document.querySelector(".wrapper-naviagtion-icons").style.backgroundImage = "url({{category.customFields.twt_modern_pro_custom_field_set__category_navigation_icon_desktop_url}})";
                    }
                </script>

</a>

I also tried to a different way to display the hover state icon as a separate div and manipulate the display state on :hover by changing it to display:none;. I cannot solve this with pure css because i do safe the icon urls in a twig template variable.

Tags:

2

Answers


  1. 0

    Pure css:

    .navigation {
  height: 65px;
  width: 65px;
  margin: 0 auto;
}

.icon {
  background: url(https://sw6.boxolutions.de/media/23/3d/22/1679924988/Gift-Boxen.svg) no-repeat;
}

.icon:hover {
  background: url(https://sw6.boxolutions.de/media/f7/13/14/1679925597/Kartonfinder-star.svg) no-repeat;
}
    <div class="navigation icon"></div>

    Using JQuery:

    .navigation {
  height: 65px;
  width: 65px;
  margin: 0 auto;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="navigation-1" class="navigation" style="background: url(https://sw6.boxolutions.de/media/23/3d/22/1679924988/Gift-Boxen.svg) no-repeat;">

</div>

<script>
  $(document).ready(function() {
    $("#navigation-1").mouseenter(function() {
      $(this).css('background-image', "url(https://sw6.boxolutions.de/media/f7/13/14/1679925597/Kartonfinder-star.svg)")
    });
    $("#navigation-1").mouseleave(function() {
      $(this).css('background-image', "url(https://sw6.boxolutions.de/media/23/3d/22/1679924988/Gift-Boxen.svg)");
    });
  });
</script>
    Login or Signup to reply.
  2. 0

    The reason why only the first one is changing is because when you use querySelector, it basically get the first element that match the criteria. Example, if you have

    <p class="my-text">First</p>
<p class="my-text">Second</p>
<p class="my-text">Third</p>
<script>
  console.log(document.querySelector(".my-text").innerHTML) // "First"
</script>

    To achieve what you wanted to do using javascript, here is a simplified example, basically is to show the concept:

    function hover(e) {
e.target.innerHTML = "Hover"
}

function unhover(e) {
e.target.innerHTML = e.target.dataset.text
}
    <p class="my-text" data-text="First" onmouseenter="hover(event)" onmouseleave="unhover(event)">First</p>
<p class="my-text" data-text="Second" onmouseenter="hover(event)" onmouseleave="unhover(event)">Second</p>
<p class="my-text" data-text="Third" onmouseenter="hover(event)" onmouseleave="unhover(event)">Third</p>

    You can pass in event when you set the attribute onmouseenter and onmouseleave. Then inside hover function, you can know which element is user hovering by referring to e.target. Refer to this page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search