Front-end Developer Front-end Developer - 3 months ago 13
CSS Question

How to hide side tab-content when mouseleave

I am trying to fix some side tabs like you see on the homepage on AliExpress.com. With the onmouseover event the tabs will be fold out, but how can I hide the tab-content when the mouse is not hovering over #categories-list-box and .tab-content?



// Hover tabs Accessoires

function openAccessoires(event, category){
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");
}

// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(category).style.display = "block";
event.target.className += "active";

}

#categories-content-title {
text-align: center;
width: 250px;
margin-left: 0px;
font-weight: bold;
border-right: 1px solid #e7e7e7;
padding: 10px;
}

#categories-list-box {
width: 250px;
border: 1px solid #e7e7e7;
float: left;
}

.tablinks {
color: black;
}

.tabcontent {
display: none;
padding: 6px 12px;
position: relative;
float: left;
min-width: 500px;
max-width: 500px;
min-height: 400px;
border: 1px solid #e7e7e7;
}

.tabcontent img {
width: 200px;
padding: 20px;
}

.tablinks:hover {
cursor: pointer;
color: #318E51;
text-decoration: none;
}

.tablinks:active, a.tablinks:focus {
color: black;
text-decoration: none;
}

.accessoires-images {
width: 100%;
height: auto;
border: 1px solid #e7e7e7;
margin: 2px 0;
}

dl.hoverable-accesoires {
padding: 8px 8px 8px 30px;
}

<div class="main-section accessoires-section">

<div id="categories-content-title">Accessoires</div>
<div id="categories-list-box">
<dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'usbcable')"">USB Cable</a></dl>
<dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'selfiestick')">Selfie Stick</a></dl>
<dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'powerbank')">Power Bank</a></dl>
<dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'carcharger')">Car Charger</a></dl>
<dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'headset')">Headset</a></dl>
<dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter=" openAccessoires(event, 'phonecase')">Phone Case</a></dl>
</div>

<div id="usbcable" class="tabcontent">
<img src="IMAGE/usb.jpg" alt="usb-picture" class="accessoires-images"/>
</div>

<div id="selfiestick" class="tabcontent">
<img src="IMAGE/selfiestick.jpg" alt="selfiestick" id="selfiestick-picture" class="accessoires-images"/>
</div>

<div id="powerbank" class="tabcontent">
<img src="IMAGE/powerbank.jpg" alt="oppo-powerbank" class="accessoires-images"/>
<img src="IMAGE/powerbank1.jpg" alt="oppo-powerbank1" class="accessoires-images"/>
<img src="IMAGE/powerbank2.jpg" alt="oppo-powerbank2" class="accessoires-images"/>
</div>

<div id="carcharger" class="tabcontent">
<img src="IMAGE/car-charger.jpg" alt="car-charger" class="accessoires-images"/>
</div>

<div id="headset" class="tabcontent">
<img src="IMAGE/headset.jpg" alt="oppo-headset" class="accessoires-images"/>
<img src="IMAGE/bluetooth-headset.jpg" alt="oppo-bluetooth-headset" class="accessoires-images" />
</div>

<div id="phonecase" class="tabcontent">
<img src="IMAGE/case.jpg" alt="oppo-powerbank" class="accessoires-images"/>
<img src="IMAGE/case1.jpg" alt="oppo-powerbank1" class="accessoires-images"/>
<img src="IMAGE/case2.jpg" alt="oppo-powerbank2" class="accessoires-images" />
<img src="IMAGE/case3.jpg" alt="oppo-powerbank3" class="accessoires-images" />
</div>
</div>




Answer

You need to attach the mouseleave event to each tabcontent.

This can be done inline:

<div id="powerbank" class="tabcontent" onmouseleave="hideAccessoires(this, event)">

or:

    window.addEventListener('DOMContentLoaded', function(e) {
        Array.from(document.getElementsByClassName('tabcontent')).forEach(function(ele, index) {
            ele.addEventListener('mouseleave', function(e) {
                e.target.style.display = "none";
            })
        });
        document.getElementById('categories-list-box').addEventListener('mouseleave', function(e) {
                if (e.relatedTarget.className.indexOf('tabcontent') == -1) {
                    tabcontent = document.getElementsByClassName("tabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                        tabcontent[i].style.display = "none";
                    }
                }
        });
    })

The snippet:

function openAccessoires(event, category){
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace("active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(category).style.display = "block";
  event.target.className += "active";

}

window.addEventListener('DOMContentLoaded', function(e) {
  Array.prototype.slice.call(document.getElementsByClassName('tabcontent')).forEach(function(ele, index) {
    ele.addEventListener('mouseleave', function(e) {
      e.target.style.display = "none";
    });
    document.getElementById('categories-list-box').addEventListener('mouseleave', function(e) {
      if (e.relatedTarget.className.indexOf('tabcontent') == -1) {
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
      }
    })
  });
})
#categories-content-title {
  text-align: center;
  width: 250px;
  margin-left: 0px;
  font-weight: bold;
  border-right: 1px solid #e7e7e7;
  padding: 10px;
}

#categories-list-box {
  width: 250px;
  border: 1px solid #e7e7e7;
  float: left;
}

.tablinks {
  color: black;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  position: relative;
  float: left;
  min-width: 500px;
  max-width: 500px;
  min-height: 400px;
  border: 1px solid #e7e7e7;
}

.tabcontent img {
  width: 200px;
  padding: 20px;
}

.tablinks:hover {
  cursor: pointer;
  color: #318E51;
  text-decoration: none;
}

.tablinks:active, a.tablinks:focus {
  color: black;
  text-decoration: none;
}

.accessoires-images {
  width: 100%;
  height: auto;
  border: 1px solid #e7e7e7;
  margin: 2px 0;
}

dl.hoverable-accesoires {
  padding: 8px 8px 8px 30px;
}
<div class="main-section accessoires-section">

    <div id="categories-content-title">Accessoires</div>
    <div id="categories-list-box">
        <dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'usbcable')"">USB Cable</a></dl>
        <dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'selfiestick')">Selfie Stick</a></dl>
        <dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'powerbank')">Power Bank</a></dl>
        <dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'carcharger')">Car Charger</a></dl>
        <dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter="openAccessoires(event, 'headset')">Headset</a></dl>
        <dl class="hoverable-accesoires"><a href="#" class="tablinks" onmouseenter=" openAccessoires(event, 'phonecase')">Phone Case</a></dl>
    </div>

    <div id="usbcable" class="tabcontent">
        <img src="IMAGE/usb.jpg" alt="usb-picture" class="accessoires-images"/>
    </div>

    <div id="selfiestick" class="tabcontent">
        <img src="IMAGE/selfiestick.jpg" alt="selfiestick" id="selfiestick-picture" class="accessoires-images"/>
    </div>

    <div id="powerbank" class="tabcontent">
        <img src="IMAGE/powerbank.jpg" alt="oppo-powerbank" class="accessoires-images"/>
        <img src="IMAGE/powerbank1.jpg" alt="oppo-powerbank1" class="accessoires-images"/>
        <img src="IMAGE/powerbank2.jpg" alt="oppo-powerbank2" class="accessoires-images"/>
    </div>

    <div id="carcharger" class="tabcontent">
        <img src="IMAGE/car-charger.jpg" alt="car-charger" class="accessoires-images"/>
    </div>

    <div id="headset" class="tabcontent">
        <img src="IMAGE/headset.jpg" alt="oppo-headset" class="accessoires-images"/>
        <img src="IMAGE/bluetooth-headset.jpg" alt="oppo-bluetooth-headset" class="accessoires-images" />
    </div>

    <div id="phonecase" class="tabcontent">
        <img src="IMAGE/case.jpg" alt="oppo-powerbank" class="accessoires-images"/>
        <img src="IMAGE/case1.jpg" alt="oppo-powerbank1" class="accessoires-images"/>
        <img src="IMAGE/case2.jpg" alt="oppo-powerbank2" class="accessoires-images" />
        <img src="IMAGE/case3.jpg" alt="oppo-powerbank3" class="accessoires-images" />
    </div>
</div>

Comments