Streaming live at 10am (PST)

Deactivate Hover on touch devices


#1

Can I somehow deactivate the hover effect on touch devices so that automatically the hover stage is shown?

Best regards
Raphael


#2

Hey Raphael, hover does not work on touch devices. If you want that style to show on touch devices why not apply it to your Tablet device and let the styles cascade down?


#3

Thanks, I was thinking way to complicated. What do you mean by cascating down?


#4

and is there also a way to detect tablets like Microsoft's surface? It displays the page regularily like a normal webpage


#5

What do you mean by cascading down?

When you create a style in Desktop, it copies those styles to all the devices below it. That's what cascading means. Watch these videos to learn more:

http://tutorials.webflow.com/understanding-css-cascading
http://tutorials.webflow.com/css-cascading-on-different-media-queries

Is there also a way to detect tablets like Microsoft's surface?

No, currently it's resolution based, not based on a specific device. Hope that helps!


#6

Maybe one more question. Is there a simple way to let the hover state keep forever? So as soon as am image is hovered,it keeps it's stage until the site is refreshed.


#7

There's no way of doing this using CSS. You'll have to find some javascript to create that kind of behavior.


#8
<script>
	$(document).ready(function() {
		$('.awesome-class').hover(function() {
			var imageURL = 'http://youeawesomesite.com/images/epic.png';
			$('.awesome-class-inside').css('background-image', 'url(' + imageURL + ')');
		});
	});
</script>

That should do the work. $.hover(); can have 1 or 2 arguments.

$.hover(function() { ... }); will do the function when you hover your mouse over the object.

$.hover(function() { ... }, function() { ... }); will do the first function when you hover your mouse over the object and do the second function once you move your mouse out of the object.

In your case, if you go with 1 argument (1 function) it will not "get back" to the previous state once you take your mouse off, because there will be no function of doing so.

You're welcome.


#9

Thank you very much!
If I like to use the code on a specific section, how can I implement it? I cannot assign the awesome class to it when I insert the code..


#10

See that $('.awesome-class') and $('.awesome-class-inside')? You can change it in code to whatever you need. Also you can select your section and go to Settings tab and put a Unique_ID for that section. That way if you call it eg. supersection you can refer to it in code by changing

$('.awesome-class')

to

$('#supersection')

I'll try to explain the code since it might be a little confusing at first.
<script> you have to put iyour code between this and </script> to work.

$(document).ready(function() { this one stands for "when the document is ready do the following:"

$('.awesome-class').hover(function() { When you hover your mouse over the object with awesome-class do the following:

var imageURL = 'http://youeawesomesite.com/images/epic.png'; set a variable called imageURL and store a link to the image.

$('.awesome-class-inside').css('background-image', 'url(' + imageURL + ')');
This one might need a little more explanation. We can divide it in few steps:

  1. $('.awesome-class-inside') We target the object with the class name awesome-class-inside...
  2. .css( ... ); and we change it's CSS parameters
  3. Things that are inside the .css( ... ); are telling what do you change for what. .css(parameter, value);. In this particular situation in code I wrote above there is a parameter background-image and a little complex value. Since the value of background-image has to be the url to the image you want to use we had to make it url( ... ). And because we store a link to the image in variable imageURL we can put it inside that url thingy by adding it inside the url tag.

url(' + imageURL + ')

And of course we have to close the script tags smile

        });
    });
</script>

#11

Also do not forget you have to put your code inside Site Dashboard in Custom Code section in second field that stands for before </body> smile


#12

wow, really well explained. Thanks a lot!


#13

#14