So I'm trying to remove all hover features and auto loading from my site so I commented out all the code that is related to the :hover feature in my site but there is still hovering available.
I'm also trying to remove all the available auto load features like the loader transform and animations. I did but I still see both hovering and some animations.
Is there something that I could be missing?
Like this hover and transform features below I removed them
.cateogory ul li a:hover:before {
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
}
.category-2 {
transition: all 0.4s ease;
}
In your code it looks like there is a typo
cateogory
.category ul li a:hover:before {
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
}
.category-2 {
transition: all 0.4s ease;
}
If that does not solve You may create another class and copy all inside and change its classname with javascript
<!-- language: lang-css -->
.category ul li a:hover:before {
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
}
.category-nohover ul li a:hover:before {
}
.category-2 {
transition: all 0.4s ease;
}
Related
hover is not working on my image. I honestly do not know why. Image is in a div class called portfolio as seen by code below
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img{
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1),
opacity 250ms linear;
}
.portfolio__img:hover {
transform: scale(2);
opacity: .75;
}
The hover is being carried out on (portfolio__img).
The class of the div is (portfolio__item).
That is the problem.
Try replacing class name with portfolio__img
You have a few mis-types in your CSS:
There should be no space between the colon and hover-- it is a pseudo-selector written as :hover:
(I removed the line regarding the colon after opacity because I misread it, thanks to #pete for the correction.
.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img:hover { /* no space here between : and hover */
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1),
opacity 250ms linear;
}
.portfolio__img:hover { /* no space here between : and hover */
transform: scale(2);
opacity: .75;
}
Also, as #bouh points out in the comments, there is no element with the class .portfolio__img in your mark-up, so no elements will be matched by this selector.
If we combine these two things we should have a working example:
.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img:hover {
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1), opacity 250ms linear;
}
.portfolio__img:hover {
transform: scale(2);
opacity: .75;
}
<div class="portfolio">
<a href="#" class="portfolio__item">
<p class="portfolio__img" src="../imagefolder/me.jpeg" alt="me">test test test</p>
</a>
</div>
The problem I have is that when I set a:
.banner-division2 h2:hover {
-webkit-transition: 0.6 ease;
transition: 1s ease;
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
It will only transition for the first part of the hover. In other words, once the mouse has exited the "hover" area, it will automatically go back to it's original form - however, I want it to transition ease back into it's original form (it isn't doing this).
Many thanks.
You need to put the transition property on the element you want the effect, not on the :hover.
Like this
h2 {
color: blue;
transition: 1s ease;
}
h2:hover {
color: red;
}
If this not work , try to add the value all on the transition property
You have defined the transition for the :hover state only. When not in :hover, no transition is defined - and ofc, none does happen. So split your rule:
.banner-division2 h2 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.banner-division2 h2:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
This way, the transition targets your h2, not only your h2:hover.
I'm trying to make a button which, on hover, will go up 5px.
It works fine with transitions. But the problem is that, when I hover my mouse on the lower part of the button, as soon as I move the mouse (I'm guessing it checks :hover on mouse update, but I'm new to CSS...), since the button has gone up, it realizes it no longer hovers, so it snaps back into position, and it ends up flickering.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
How can I prevent this behavior? Only possible solution I've found is to use display: inline-block, but it doesn't seem to make any difference.
Also, I've tried using a container div, but it still does the same thing.
Seems to work OK with a container, if you monitor :hover on the container, then transform the button. And you only need to define transition and transform once each.
.btn {
display: inline-block;
transition: transform 50ms ease;
}
div:hover .btn {
transform: translate(0px, -5px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<button class="ui button btn"> That rocks!</button>
</div>
Put the button into a container, and make it so when you hover over the container it changes the child button:
.container:hover .btn {
transform: translate(0px,-5px);
}
If you set the hover event on the container it should work.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
div {
transition: transform 50ms ease ;
background: pink;
}
div:hover .btn {
transition: transform 50ms ease ;
transform: translate(0px,-5px);
}
<div>
<button class="ui button btn"> That rocks!</button>
</div>
When hovering, add an ::after pseudoelement with these styles:
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
It will keep the focus on the button.
Snippet:
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease;
}
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
I'm working on making a sidebar on My main page something like google ventures (https://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product). but the problem I'm getting is when I click to any menu item in the sidebar , the side bar gets collapse but the text for menu item is still there. I want to keep the sidebar open till the mouse cursor is in the sidebar area (even when user clicks on any menu it should remain opened/expended) but it gets collapse on cliking on any item while the text for the menu item remain in the air. I don't know how to fix it as Im not much hands-on with css and designing.
here is my jquery code for adding classes for collapse/expand the side bar
$('[data-toggle="offcanvas"]').mouseenter(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse');
$("body").addClass('sidebar-open')
}
});
$('[data-toggle="offcanvas"]').mouseleave(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-open')) {
$("body").removeClass('sidebar-open');
$("body").addClass('sidebar-collapse')
};
});
and here are css classes (with media queries) for this
.main-sidebar,
.left-side {
position: absolute;
top: 0px;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 0;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}
#media (max-width: 767px) {
.main-sidebar,
.left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (min-width: 768px) {
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (max-width: 767px) {
.sidebar-open .main-sidebar,
.sidebar-open .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.sidebar {
padding-bottom: 10px;
}
and here is html code where my sidebar resides
<aside class="main-sidebar" data-toggle="offcanvas">
<section class="sidebar">
<ul class="sidebar-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</section>
<aside>
I tried to implement it on mouseclick event by keeping adding the sidebar-open class but this didn't work. Any help would be highly appreciated. Thanks
You can put the text in an element like, say p's. Then you can you try hiding the them when mouse leaves and show them when mouse enters. You can add the lines similar to the below ones in your jquery.
// on mouse leave
$('ul.sidebar-menu li>p').hide();
// on mouse enter
$('ul.sidebar-menu li>p').show();
Edit ---
Alternatively you can try the below CSS for aside.main-sidebar,
white-space: nowrap;
overflow: hidden;
I have an un-ordered list of 12 images in 3 colons x 4 rows gallery.
When hovered a tranform scale is applied.
How can i set the transform origin for (3n+1) images ( images 1-4-7-10 ) to LEFT
and for 3nth (3 -6-9-12)element to RIGHT?
Im tryng to enter the html and the css here, but got error messages.
You didn't specify the y value desired for your transform origin (so I suppose is 0), but if you're applying the scale to the images this should work (add prefixes for specific vendors)
li:nth-child(3n+1) img {
transform-origin : 0 0;
}
li:nth-child(3n) img {
transform-origin : 100% 0;
}
This is the code and how i think to get it formatted by css.
I put a draft working example on the site vsio.ru.
I want the first fourth seveth .... (3n+1)image when hovered been 2 times bigger [tranform:scale(2)]
and transform origin set to left and third 6-th 9-th......(3n) a transform origin set to right.
( IS IT POSSIBLE A APPLY A PSEUDO CLASS( HOVER) TO A PSEUDO ELEMENT (NTH-CHILD)? AND HOW? )
`
section#gallery{
Width:670px;
}
section#gallery ul li{
display:inline;}
section#gallery ul li img{
width: 215px;
height:150px;
border: 2px solid #fff;
margin: 5px 0px 0px 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
}
section#gallery ul li img:hover {
-webkit-transform:scale(2) ;
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-box-shadow:1px 1px 2px 1px #999999;
}
`