is it possible to get hover effects on mobile devices?

tazarbm

tazarbm

Elite Member
Executive VIP
Jr. VIP
Joined
Oct 28, 2020
Messages
11,663
Reaction score
14,636
Hey guys!

I have a (seemingly retarded) question, but I choose to be considered retarded in this regard but find out a definitive answer to this question than not asking it but continuously regretting it moving forward, so please answer this if you know the answer...

Can I make it possible (maybe via a plugin, or shortcodes, or in whichever other way?) for my website's visitors to hover over text so they can see a thumbnail of what the hovered over text represents? Think of a table that lists the prices for all BMW models, but in order to keep the table simple and clean I'd like to remove the column that shows an image of each BMW model whose price I'm listing, and have the image of that BMW model appear as a popup / lightbox / whatever the hell it's called when people hover over the name of that model.

For desktop this is probably easy to do with Wordpress plugins, but I'm not sure that it's possible to do it for mobile devices since there's no mouse cursor to trigger the hovering effect, which is why I'm asking...

Please let me know!
 
Advertise on BHW
After trying out a few plugins for hovering effects and shortcodes I realized that what I'm actually looking for is a plugin that creates tooltips and inside of the tooltip it should be allowed HTML so that I can link to images in my site's media library.

I tried the Hover Effects Ultimate and Shortcodes Ultimate plugins but neither did the trick... or maybe I couldn't figure out how to do it, because I need to create stuff within stuff within stuff, something like put image inside of tooltip inside of hovering effect inside of table... pretty mind blowing stuff, I know, but it's what needs to be done :)

Can anyone still suggest a solution? Or am I complicating things too much?
 
mmubeen8 said:
I think elementor pro could help you out with this.
Click to expand...
elementor (well, site builders in general) bloats the site, so I'm trying to stay away from them. Thanks for the recommendation nonetheless, I appreciate it :)
 
This cannot be done. There is no mouse cursor for mobile devices as you have said in your original post. You can figure out the time an user touched if you track the touchstart and touchend, and if the element touched for less time, you could take it as a hover. But a hover like the desktop is simply impossible (it may work for some tab devices though which come with a bluetooth pen, like s7 plus but that’s niche).

ps you don’t need a plugin for this.. You could do it just with some css rules.
 
armenkozlowski said:
Have your tried tippy js?
Click to expand...
never heard of that. Is it a plugin, or??

Gogol said:
This cannot be done. There is no mouse cursor for mobile devices as you have said in your original post. You can figure out the time an user touched if you track the touchstart and touchend, and if the element touched for less time, you could take it as a hover. But a hover like the desktop is simply impossible (it may work for some tab devices though which come with a bluetooth pen, like s7 plus but that’s niche)
Click to expand...
damn, that's what I was afraid of...

Gogol said:
ps you don’t need a plugin for this.. You could do it just with some css rules.
Click to expand...
I mean, I would do it if I knew CSS :)

May I get the CSS code from you if it's not too much trouble? And where do I insert that code?
 
tazarbm said:
May I get the CSS code from you if it's not too much trouble? And where do I insert that code?
Click to expand...
It’s pretty easy. ;)

You need to put it in your style.css. If your element’s class name is for example column, you could write

.column:hover {
text-decoration:underline;
}

etc…

It is just an example. What’s important here is the :hover selector. Add any style you want inside it, and it will be used when the element is hovered.
 
Did you ask ChatGPT Xd?
Yes, it is possible to get hover effects on mobile devices. However, it is important to note that hover effects are typically triggered by the mouse cursor moving over an element on a desktop computer. On a mobile device, there is no mouse cursor, so hover effects cannot be triggered in the same way.
There are a few ways to achieve a similar effect on mobile devices:
  1. Use touch events: You can use touch events such as "touchstart" and "touchend" to trigger hover effects on mobile devices. These events are triggered when the user touches the screen and releases their finger, respectively.
  2. Use media queries: You can use media queries to apply different styles to your website depending on the device and its capabilities. For example, you can use a media query to apply hover effects only to devices that have a mouse cursor (e.g. desktop computers) and not to devices that do not (e.g. mobile devices).
  3. Use JavaScript: You can use JavaScript to detect when a user touches the screen and then apply a hover effect to an element. This can be done using the "touchstart" and "touchend" events, as well as the "classList" API to add and remove CSS classes from elements.
Overall, it is possible to achieve hover effects on mobile devices, but it requires some extra work and consideration of the specific capabilities and limitations of different devices.
 
MgicalaEarner said:
Did you ask ChatGPT Xd?
Yes, it is possible to get hover effects on mobile devices. However, it is important to note that hover effects are typically triggered by the mouse cursor moving over an element on a desktop computer. On a mobile device, there is no mouse cursor, so hover effects cannot be triggered in the same way.
There are a few ways to achieve a similar effect on mobile devices:
  1. Use touch events: You can use touch events such as "touchstart" and "touchend" to trigger hover effects on mobile devices. These events are triggered when the user touches the screen and releases their finger, respectively.
  2. Use media queries: You can use media queries to apply different styles to your website depending on the device and its capabilities. For example, you can use a media query to apply hover effects only to devices that have a mouse cursor (e.g. desktop computers) and not to devices that do not (e.g. mobile devices).
  3. Use JavaScript: You can use JavaScript to detect when a user touches the screen and then apply a hover effect to an element. This can be done using the "touchstart" and "touchend" events, as well as the "classList" API to add and remove CSS classes from elements.
Overall, it is possible to achieve hover effects on mobile devices, but it requires some extra work and consideration of the specific capabilities and limitations of different devices.
Click to expand...
nope, never tried chatGPT, and I don't think I will anytime soon because my pride doesn't allow me to become dependent on a robot :D

That "touchstart" thing sounds interesting, especially since I just noticed that some plugins that create hovering effects mention this in their settings... Thanks for the tip ;)
 
If you have a wp website then elementor or any builder would be fine
or else you can use CSS but that would be a bit tricky
 
Developie said:
If you have a wp website then elementor or any builder would be fine
or else you can use CSS but that would be a bit tricky
Click to expand...
I'm never going to use site builders, I can guarantee you this!

Yeah, CSS is an option but I suck at coding, so I don't know... But thanks for the tips :)
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top