Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 16, 2017 at 3:11 pm #761963
    Guenni007

    i see that there are often for pseudo class :hover some classes set additionaly – guess it is for touchscreens a fix.
    (f.e. : av-overlay-on-hover )

    i try to make a script which enables the possibilty to have a “hover state” (touchstart) and a click state but i think that some scripts in enfold itself are in counterpart to my dues.

    i need it for images (alb) with description – on hovering the description goes to opacity 1 – but on touch the link is fired directly.
    For me it would be nice to have on first touch the “hover” effect and on the second touch the tab (double-tip) to open the link.

    i found a lot of scripts for this but nothing realy works.

    The code in functions.php of child theme :

    function add_touch_fix(){
?>
<script>document.addEventListener("touchstart", function(){}, true);</script>
<?php
}
add_action('wp_footer', 'add_touch_fix');

    gives me the hover effect – but than the link does not fire.

    March 16, 2017 at 3:14 pm #761965
    Yigit

    Hey Guenter!

    Can you please post the link to your page where we can see your element?

    Regards,
    Yigit

    March 16, 2017 at 4:49 pm #762058
    Guenni007

    Yes – see private Content

    March 21, 2017 at 6:41 am #764012
    Ismael

    Hi,

    This should work for the image element.

    function ava_custom_script_fix(){
?>
<script>
(function($){
	$('.avia-image-container-inner a').on('touchstart', function (e) {
	    'use strict'; //satisfy code inspectors
	    var link = $(this); //preselect the link
	    if (link.hasClass('hover')) {
	        return true;
	    } else {
	        link.addClass('hover');
	        $('.avia-image-container-inner a').not(this).removeClass('hover');
	        e.preventDefault();
	        return false; //extra, and to make sure the function has consistent return points
	    }
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_fix');

    Add this css code:

    .avia-image-container-inner .hover .av-image-caption-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
}

    Reference: http://jsfiddle.net/c_kick/s9rB4/

    Best regards,
    Ismael

    March 22, 2017 at 4:52 pm #764875
    Guenni007

    oh – wow – thanks ismael – works like a charm!

    Sorry for my late reply. – i do work on a different installation now. But this is great – Thanks

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘some extra classes for hover states on enfold’ is closed to new replies.