So I am trying to mimic css :hover class on mobile. In my app you can click and drag on things, and when drag over top of elements I need those elements to get a class that changes its z-index and a few other t hings. Is it possible in Angular / Ionic or maybe just pure CSS to change style when "hovering" on touch?
I have tried adding
.myClass:hover{
color:#000;
background-color:red;
}
As something basic to see if it works and this works while hovering but not while clicking and hovering. Any ideas?
Its better to add a class on touchStart and remove it on touchEnd so you can make the changes you want in the css class
Related
Hey guys im really new to Vue, HTML, CSS and Element Plus. I wanted to create a Side Bar Menu with your own hover effect. However this is not changable. If you change the background-color of el-menu to anything, the hover effect vanishes. I've tried using :hover on the el-menu element and change the back-ground-color but this does not seem to work either. The default hover effect color is light blue but i need it in lightgray.
I am using Vue3
The Sidebar I want to use is from here: https://element-plus.org/en-US/component/menu.html#side-bar
so I tried to test it from element-plus playground and it works fine when I override it from el-menu class.
here is the link I tested. could you please add more detail.
Can I remove hover from all the elements using CSS or Javascript? I want to remove it on mobile but to have it on desktop. I tried using pointer-events: none but it's removing all the events and I want the click event to remain.
Is there a way to remove only the hover property?
You can target all elements and their hover state using css:
*:hover {
}
Removing hover from mobile seems pointless since users cant really hover over elements. If they click on an element it kind of acts like a hover and having a special color for hover is therefore good, because user can see he actually cliked the element.
I am currently building Twitter from scratch using React and I've been trying to replicate the Hover effect on the Navigation (the round colour that appears when you hover over anything on the Nav side of the site). Please help me.
TwitterImageScreenshot:
You have to apply CSS to change the background colour on Hover.
You can use CSS :hover Selector.
Read more about it here: https://www.w3schools.com/cssref/sel_hover.asp
I'm looking for some code which allows to scroll just through whole images on my landing page.
I don't really know how to explan but it's exactly the style on tesla.com. Every scroll on the mousewheel scrolls down one whole image.
How can you make something like this in Css & Javascript?
Best regards,
andy
Surely you can find bunch of working code around, but if you want to create your own you can follow these steps to begin.
Create divs with 100% width and height and position:absolute;
top:0; left:0; transform:translateY(100%).
Your divs will need some status flags like active, hidden, next, prev. Create animations with css or javascript which visually animate the divs but also change and handle these flags.
i.e. transform:translateY(0); to show a div and transform:translateY(100%); to hide a div back again. (This animations are completely up to you)
Finally bind these animation to window scroll event with javascript. If you want you can't bind these to other events like keypress, touch etc.
Now, I got it, what you want you use in your app.
You want to scroll through the whole page with an multiple image in the background should be changed on-scroll.
It can be done nicely using background-image property in CSS some Javascript.
See this demo - Change background image on-scroll.
Use this, it will work like charm.
I am building a menu for a responsive website - my query is what people think is the best solution for showing / hiding the menu.
I have setup the menu in this jsfiddle - http://jsfiddle.net/paul_dance/5z7rvvn4/2/
The menu is hidden at 768px and a button is show - I was thinking of adding a simple js script
$('.menu-btn).click(function(){
$('nav ul').slidetoggle();
});
or similar..
which toggles the menu on click - but my fear is if the user hides it again then expands their screen beyond 768 the menu will remain hidden and no button present to re-show.
Is there a better cross browser / device solution available? Or a CSS only solution? This needs to work on IE8 also.
Instead of using slideToggle, just toggle an open class on the #nav element.
Then in your "mobile" sized media query, have #nav.open display the menu (i did this by setting #nav.open > ul to display:block;).
example:
http://jsfiddle.net/rally25rs/5z7rvvn4/3/
The example isnt animated, but you could add a CSS3 transition on height instead of just changing the display:none; of the element. CSS3 transitions wont work in IE 8 or 9, the menu will just appear, but no mobile devices run IE8 or 9, so that really shouldn't be an issue.
Well, there are a couple of solutions to your problem, like this:
*instead of slidetoggle, use a toggleClass, that only works on 768px or bellow like this;
*or use a css only approach with a checkbox and a label on top of your code, replacing the button tag with a label tag; when the checkbox will be checked the menu will be shown, like this;