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.
Related
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 currently working on a project and I want to use this full screen carousel (http://bootsnipp.com/snippets/ZkRvj). I'm currently using the latest bootstrap 3 version (3.3.7) however this particular snippet was built for 3.2.0.
(If you change the bootstrap version in bootsnipp to the latest, you can also replicate the problem)
The issue I am having is that the DIV .overlay used to darken the background of each slide in the carousel is also overlapping the text and button which means the text and button is also getting darkened. I have tried giving the .hero class (used for the text and button) and the child elements a higher z-index however this does not fix the problem. I have also tried lowering the overlay z-index but this also doesn't work.
This issue does not show in bootstrap 3.2.0 but in 3.3.7 it does and I have no idea how to get around this issue.
Thanks
I don't know why the change in bootstrap version should give this issue, though it obviously does...
I got around your problem using 3 steps:
1) Give .carousel-inner a background-color: #000;.
2) Delete the '.overlay' div.
3) In your .slide-x rule (where you set the background image), add opacity: 0.4;.
Basically, this makes the image semi opaque, but not your hero. As you can see through the image to the (now) black background of the slide container you get exactly the same effect without the z-index heartache.
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
I got another CSS/JS question: I want to make a navigation menu, where there is at the beginning a div with just a text in it. If I hover with the mouse on it, there should appear a background from the left to the right.
Is this only possible with JS (so if hover, an interval gets startet which moves the background behind the text) or are there any other possibilities?
I hope you understood what I tried to say ...
Thanks for help!
Flo
EDIT: It's something moving just like this navigation here: http://iipvapi.com/, but only a simple background from the left to the right.
You could use the :hover CSS selector. This will not provide animation functionality though. It will just apply the style or not based on whether you are hovering.
You could do it with pure JavaScript, but it would be a little awkward if you want animation.
You could do it with JavaScript using jQuery, which provides animation functionality and is easy to use. You probably want the animate function, as it sounds like a bit more of a custom solution than functions such as slideDown would provide.
The hover button effects on http://37signals.com/ are beautiful and super quick. How did they do it? It appears to be javascript and css3, but I can't tell, from the source code, what kind of functions they used to achieve the effect.
Thanks!
Azeem
They have a few divs (with classes box hover_container hover_target) that have a hover event attached to it. When the user hovers over a target box, the class hover is added to it. The class hover has a gradient effect which highlights the currently hovered block.
Each of those blocks have a custom arrow image and text associated with it inside the markup. It's simple enough to see which one is being hovered over and display the correct content and arrows