How to show arrow only when hover slideshow

Question

How to fix the option to show arrows only when the pointer hover over the slideshow. Just what you see on Facebook if looking at photo albums. Leaving the mouse off slideshow, means that arrow will be transparent or hide. Please check below to understand my issue.

function slide(x) {
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if (imagecount > total)
        imagecount = 1;
    if (imagecount < 1)
        imagecount = total;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}
 
window.setInterval(function slideA() {
    var Image = document.getElementById('img');
    imagecount = imagecount + 1;
    if (imagecount > total)
        imagecount = 1;
    if (imagecount < 1)
        imagecount = total;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}, 5000);
 
function selectSlide(slideNumber){
    var Image = document.getElementById('img');
    imagecount = slideNumber;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}

.container-fluid {
    width: 100%;
    position: relative;
    height: auto;
}

#img {
    width: 100%;
    height: auto;
    position: relative;
}

#left-arrow .left {
    width: 5%;
    position: absolute;
    top: 40%;
    left: 20px;
    opacity:0.5;
}

#right-arrow .right {
    width: 5%;
    position: absolute;
    top: 40%;
    right: 20px;
    opacity:0.5;
}

#left-arrow .left:hover {
   cursor:pointer;
    cursor:hand;
    background: #4E9F69;
}

#right-arrow .right:hover {
    cursor:pointer;
    cursor:hand;
    background: #4E9F69;
}

<div class="container-fluid">
    <img src="IMAGE/img1.jpg" alt="" id="img"/>
    <div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
    <div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>
</div>

Okay, so simple argumentation: Arrow div should be hidden, then opun entering the container div of that image, show them, which can be done by css and js quite easy. So do something with `container-fluid` to affect the `left-arrow` and `right-arrow`. http://stackoverflow.com/questions/5061940/changing-the-child-elements-css-when-the-parent-is-hovered-with-jquery — Dorvalla, Jan 26 '16 at 20:02
Thanks for your advice, it has helped me to find the solution. Another issue I have met now is how can I unbind this option when resizing the screen to 767px. — , Jan 27 '16 at 11:09

score 0 · Answer 1 · answered Jan 26 '16 at 20:54

What you first need is elements that legally can take focus. Say, an a. It is valid to use a without href.

<div class="myImageSliderWrap">
 <a class="MyImageSliderLeftBut"></a>
 <a class="MyImageSliderRightBut"></a>
 <img ... etc >
</div>

Now style your a's as block with a height of 100% and a width of 50% so they overlap your entire picture and either put in an SVG arrow image that you style further, or use a background image with background positioning.

Please bear in mind that you are going to need to read up on WAI aria roles and the use of tabindex to get this to be even close to accessible.

Best of luck.

score 0 · Answer 2 · answered Jan 26 '16 at 22:57

Have used mouseenter and mouseleave to hide or show arrow.

$(function (){
  $(".container-fluid").mouseenter(function(){
  $("#left-arrow, #right-arrow").show();
  });
  $(".container-fluid").mouseleave (function(){
  $("#left-arrow, #right-arrow").hide();
  });
});

How to show arrow only when hover slideshow

2 Answers2