Is there a way to enable hover functionality on mobile devices? I wish for the hover effect seen on desktop to be triggered automatically on mobile devices

I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain unaffected. I am torn between troubleshooting @media (hover: hover) or exploring alternative solutions. As a newcomer to website development and Stack Overflow, I find myself struggling to navigate these challenges. I have not found any existing questions that closely resemble my dilemma and guide me towards a resolution. Below is an excerpt of my CSS code.

    .card-container
{
    margin-top: 10%;
}

.card-container h1
{
    font-family: merriweather;
}

.card
{
    position: relative;
    overflow: hidden;
}

.card:before
{
    position: absolute;
    content: '';
    width: 80%;
    height: 220%;
    background: rgba(217, 153, 35, 0.7);
    top: -50%;
    left: -100%;
    z-index: 1;
    transform: rotate(25deg);
    transform-origin: center top 0;
    transition: .5s;
}

.card:hover:before
{
    left: 10%;
}

.card img
{
    width: 100%;
    height: auto;
}

.card-text
{
    width: 100%;
    padding: 0 20px;
    position: absolute;
    top: -100%;
    color: #ffff;
    left: 0;
    z-index: 2;
    transition: 1.1s;
}

.card-text h3
{
    font-family: merriweather;
    font-weight: 900;
}

.card-text h5
{
    font-family: lora;
}

.card:hover .card-text
{
    top: 80px;
}
javascripthtmljquerycssbootstrap-5

Answer №1

For mobile devices, achieving a hover effect requires using a combination of hover and active states for the element.

To make this work in your CSS code, you should include something similar to:

.card:hover, .card:active{
//your hover effect.
}

Answer №2

To create responsive media queries, you can combine CSS selector properties.

For example: .class:hover, .class:active, .class:focus

Check out this live demo for a detailed understanding: https://jsfiddle.net/yudizsolutions/nc2fh7kp/

ol,
ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 20px 0 20px;
  vertical-align: middle;
}

a:hover,
a:focus,
a:active {
  color: #999;
  text-decoration: none;
}

a {
  text-decoration: none;
  transition: color 0.1s, background-color 0.1s;
  position: relative;
  display: block;
  padding: 16px 0;
  margin: 0 12px;
  letter-spacing: 1px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  text-transform: uppercase;
  transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
  color: #000;
}

a::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 3px;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #000;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: color 0.1s, transform 0.2s ease-out;
}

a:active::before {
  background-color: #000;
}

a:hover::before,
a:focus::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
<nav>
  <ul>
    <li class="item"><a href="#">link 1</a></li>
    <li class="item"><a href="#">link 2</a></li>
    <li class="item"><a href="#">link 3</a></li>
    <li class="item"><a href="#">link 4</a></li>
    <li class="item"><a href="#">link 5</a></li>
  </ul>
</nav>

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

What is the best way to implement two events in onPress using React Native?

I'm trying to implement the UploadB function and toggle the modal visibility using setModalVisible(!modalVisible)... However, my attempts so far have not been successful. const UploadB = useCallback(() => { dispatch({ type: ADD_P ...

javascriptnode.jsreactjsreact-native

Current page with animated CSS3 menus

I found a cool menu example on this webpage: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html. I want to modify it so that the current page's menu item has a different color from the others. For example, when I'm on the home ...

jqueryhtmlcss

Above the search box in jQuery Datatable's search box, there is search text displayed

My datatable looks like this: var exTable1 = $("#exTable").DataTable({ "language": { "search": "Filter", "searchPlaceholder": "search", "loadingRecords": "", }, data: datasrc "dom": '<"top"lf>rt<"botto ...

javascriptjquerydatatables

Lag in responsiveness of iOS devices when using html5 applications

My HTML5 video app includes a combination of video, a JavaScript swipable playlist, and other animated overlays. When using the app on iOS, the performance of playlist swiping and overlay animations is great upon initial load. However, after playing a vid ...

javascriptioshtmlhtml5-video

How to Retrieve Element Property Values from the DOM with JavaScript

I am currently attempting to access the property of an element within my webpage. My main objective is to toggle a float property between left and right when a specific onClick event occurs. However, despite my efforts, I am facing challenges in even acces ...

javascriptcsselement

Monitor modifications to the form as the user navigates away from the page or refreshes

Currently, I am working on a form that was created using Formik and React Hooks. I would greatly appreciate any suggestions on how to track changes made to the form when a user clicks the home button or refreshes/reloads the page. I attempted to use the b ...

javascriptreactjsreact-hooksformik

I need help figuring out the right way to define the scope for ng-model within a directive

I found a straightforward directive to automate sliders: app.directive('slider', function() { return { restrict: 'AE', link: function(scope, element, attrs) { element.slider({ value: scop ...

javascriptjqueryangularjsangularjs-directiveuislider

Tips on passing a JSON object from JavaScript to ASP.NET

I attempted to invoke a method in an asp.net controller using a json string/object from javascript. The asp.net controller code is as follows: public class HomeController : Controller { public ActionResult doWork(string data) { // dowork. ...

javascriptc#asp.netjsonasp.net-mvc

Concealing a section of a table with JavaScript while preserving the original table structure

I made some adjustments to the script tag: $(document).ready(function) { Now, the evenTd's are hidden correctly. Here is the table with the code provided: <table> <tr> <td>itemOne</td> <td class="even ...

javascriptjqueryhtmlcssshow-hide

Click event recursion occurs due to the use of $.post

I have a collection of product rows available for customers to select from. Each row is designated with the class "product-line". Upon clicking on a row, I aim to visually indicate its selection status by toggling the "product-checked" class, and subsequen ...

javascriptjqueryajax

The issue of multiple useEffect renders is triggered by the draggable columns feature in a ReactJs Antd table

I have implemented a table in ReactJs using antd. In order to make the columns draggable, I added an eventListener to th tags. I used useRef to access all the th tags: const [cols, setCols] = useState(columns); // -> columns is a static array of objects ...

javascripthtmlreactjsdrag-and-dropantd

Shuffle math calculations involving subtraction by a percentage using node.js or JavaScript

Hello there! If you want to subtract, say 35%, from a number, you can use methods like this: var valueInString = "2383"; var num = parseFloat(valueInString); var val = num - (num * .35); console.log(val); But have you ever wondered how you could randomiz ...

javascriptnode.js

Having trouble with constructing cascading dropdown menus in ASP.NET Core 7 MVC through the use of JQuery and the ajax.googleapis.com platform

As I've been delving into the world of cascading dropdown lists, my search for examples using ASP.NET Core 7 led me to stumble upon an interesting example on a different StackOverflow post, which referred to this site. However, I encountered a roadbl ...

jqueryasp.net-core-mvccascadingdropdownasp.net-core-7.0

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

htmlcss

Angular2 - Access to fetch at 'https://example.com' from

Requesting some guidance on integrating the forecast API into my angular2 application. Currently facing a Cross-Origin Error while attempting to access the API. Any suggestions on resolving this issue? search(latitude: any, longitude: any){ consol ...

javascriptangulargetcross-domain

Inconsistency with Mobile Viewport Problem

Apologies for the chaos below, but I've spent quite some time attempting to fix this on my own. It's time to surrender and seek assistance! Here are some screenshots to illustrate the issue: The problem is that sometimes the webpage functions c ...

javascriptjqueryhtmlcssmobile

Looking to incorporate AAD calling functionality in a React and Node application by utilizing the Graph API for communication/calls

As a newcomer to Microsoft Azure and its services, I recently registered an application with Azure. However, when attempting to integrate a call feature in my Web App using the graph API '/communication/calls', I encountered the following error m ...

javascriptnode.jsreactjsmicrosoft-graph-apimicrosoft-graph-sdks

The HTML input element does not comply with the specified pattern

My current struggle lies in validating the input field for a "Phone Number". Despite creating a regex pattern that demands 10 numbers, I still encounter the error message: "Please match the requested format". I am puzzled as to why this is happening, even ...

htmlformsvalidationinput

What is the best way to display a success notification when a transaction is successfully executed in web SQL

var brand = "Glare"; var price = "3000$"; var color = "blue"; var success = tx.executeSql("INSERT INTO truck (brand, price, color) VALUES ('"+brand+"','"+price+"','"+color+"' ")"); if(success) { alert("successfully insert ...

javascriptjqueryhtml

Why isn't the default value appearing on page load in jQuery?

I have a set of radio buttons with five different values. For each value selected, a corresponding span tag is generated with a description associated with that specific radio button option. Here's an example: <table class="jshop"> <tbod ...

phpjqueryhtml