Is it possible to create a touch menu on an iPhone by utilizing basic markup and implementing the :hover-state feature?

After finally launching my WordPress blog, I spent a significant amount of time developing the theme. When I attempted to view the site on my iPhone for the first time, I was surprised by what I saw. Initially, I thought creating a touch menu would be as simple as writing some basic HTML and styling it with :hover-state. However, that was not the case.

If you change your browser to a mobile user agent and visit this site (resize the window to around 640px wide), you'll notice my light blue widget bar. Hovering over the icons toggles the inner containers with the main widget contents perfectly.

Unfortunately, when I accessed the site on my iPhone, the bar with the icons appeared but was unresponsive to touch. Frustrating! What could be wrong with my code? Any assistance would be greatly appreciated. Thank you in advance!

htmlcsshovertouchmobile-safari

Answer №1

After conducting some research on hover functionality in iOS, I stumbled upon a helpful resource that could potentially solve your issue or aid you in the future. You can check it out here: .

It seems that adding the rule -webkit-transition:all 0.3s ease-in-out; (and possibly others) may prevent hovering in iOS unless you include display:none/display:block or display:table/display:block. Furthermore, I discovered that without the hover code, clicking on a destination link in the href immediately redirects you. With the code implemented, you first need to click for a hover event before clicking again to follow the link. So if you're experiencing issues with hover on an iOS device, this solution could be what you need.

Answer №2

After attempting to implement a certain functionality in my code, I realized that it wasn't working as expected when I posted the question (unfortunately, the link is no longer available). Here's what my markup looked like:

<li class="widget-container">
    <p class="widget-title">Categories</p>
    <div class="widget-content">
        <ul>...</ul>
    </div>
</li>

The CSS styling was as follows:

.widget-content                         {display:none}
.widget-container:hover .widget-content {display:block}

I wanted to keep my code simple, but encountered an issue: on touch devices, the touch-action consistently targets the element with the highest z-index, which in this case is the .widget-title. This means that the wrapping .widget-container cannot be touched, preventing the triggering of its :hover state.

This realization led me to understand that for a touch-screen-optimized website, JavaScript is necessary for proper functionality. As a result, I have now implemented a jQuery accordion solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble getting my HTML button to redirect to a PHP link

I'm attempting to call a PHP script from my HTML file. Here's the snippet of my HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...

phphtmlweb

What's going on with the background color? It doesn't seem

I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the ...

javascriptjqueryhtmltwitter-bootstrapcss

Guide to generating a dropdown menu and linking it with data received from a server

I am completely new to Angular and recently received a project involving it. My task is to create a nested dropdown list for Json data retrieved from a server using Rest Api calls. The data contains a Level attribute that indicates the hierarchy level of ...

htmlangulartypescript

Tips for aligning content vertically in the center of a page?

A single div with dimensions of 700px width and 200px height was created. Within this div, various tags will dynamically load, spanning up to two lines. When the tags are displayed in two lines, the alignment appears correct; however, if they only take u ...

cssvertical-alignment

How can I pass an array object from an HTML form that adheres to a Mongoose schema

I have this HTML form that I'm using to create a new document in my mongo database. The document represents notes given to a teacher based on various criteria. I am storing the notes in an array within the note property, each object containing the aut ...

javascripthtmlnode.jsexpressmongoose

Steps to eliminate validation following the clearing of input fields

This is the code I've written for live validation using AJAX in an input field. My issue is that I want the validation to be removed if all inputs are deleted. <script type="text/javascript"> $(document).ready(function(){ ...

htmljqueryajax

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

javascripthtmlcssreactjstypescript

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

On my website, users can upload images, names, and descriptions which are saved in a MySQL database. The information is then fetched to display on the website. The code below allows users to enter this information and see it displayed when they click the s ...

javascriptphphtmlcssmysql

Intermittent Z-index conflicts in need of a solution - seeking guidance

Is there a way to make the h1 heading and img image elements appear on top of the opaque div they are enclosed in? I want them to look unaffected by the transparency of their parent div. Here is a Fiddle demonstrating my issue: <div id="main"> ...

htmlcsslayout

Position image/icon within navigation bar

I am currently working on a school project to create a webpage, but I am struggling to align an image/icon with the other buttons in the navbar. Despite my efforts to find a solution through Google searches, I have not been able to resolve this issue. Furt ...

htmlcss

Group of options in "JavaScript" using radio buttons

I am facing an issue with a set of three radio buttons and images, where each image is connected to a specific radio button: {image1, radioBtn1}, {image2, radioBtn2}, {image3, radioBtn3}. My goal is to have the radio button automatically checked when its ...

javascriptjqueryhtmlimage

various images in a flexbox container with varying sizes

I am having an issue with align-items: stretch flexbox. Inside this flexbox, I have an image and some static text content. The height of the image varies depending on the aspect ratio of the image, but I want all images to have the same height as the text ...

htmlcssflexbox

Adding a border in jQuery or Javascript to highlight empty form fields

After making the decision to dive into the world of Javascript, I've been dedicated to perfecting a script that will encase empty elements with a border right before the user submits a form. My ultimate goal is to implement live validation in the form ...

javascriptjquerycsshtml

Issue with positioning hover effects on CSS links

I created a basic menu and I'm struggling to understand why the second level links always appear to the right of the first level links. Since the code is quite lengthy, here's a jsfiddle link for reference. Here's what's happening in e ...

htmlcss

The navigation bar is not extending to fill the entire width of the screen

I recently created a navigation bar using the nav tag and applied CSS to set the width, border, and padding. However, I noticed that there are some empty pixels on each side of the navigation bar that I can't seem to fill up. Here is the HTML code for ...

htmlcss

Is there a way to shade the entire webpage background in HTML?

Instead of affecting other DOM classes, I tried using another div but it doesn't darken the whole page. This means I have to manually modify each DOM class. Is there a way to overlay the entire document with a semi-transparent gray plane? ...

javascripthtml

What is the best method for showing information beneath each tab?

Here is my CodePen link: https://codepen.io/santoshch/pen/MWpYdXK .tab1border{ border-right: 2px solid #f0f0f0; } .tab2border{ border-right: 2px solid #f0f0f0; } .tab3border{ border-right: 2px solid #f0f0f0; } .tab4border{ border-right: 2px soli ...

javascripthtmlcssvue.js

Expanding an element to cover all columns in a grid with automatically generated columns

I am working on a CSS grid layout with automatic columns and 2 rows. All elements are normally placed in the first row except for one special element that should span both rows while filling all available column space. My current code looks like this: ...

csscss-grid

Is there a way to show collapsed sidebar content without causing overflow: visible?

I am using a fixed left .navbar and I want to display the content of the .collapse when my .navbar is toggled (stacked to the left). I have successfully implemented this, but when I try to scroll the .navbar while it is stacked, I have to set the .navbar t ...

htmlcsstwitter-bootstrapbootstrap-5

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

cssjquery-mobilemobiledynamically-generated