1605
Views
14
Comments
Solved
hover on CSS
Question

Hi,


I want to have a hover effect on an image as well as a style with another class. 

I have put this:


@media (max-width: 800px) {

      .MoviePoster {background-color: black;Padding: 5px;border: 1px solid # 185f8d;

border-radius: 200px;width: 100%;  }  


.MoviePoster: hover { 

 -webkit-transform: rotate (360deg); transform: rotate (360deg);  

}


The first style works perfectly, the hover does nothing.

Is the css incorrect? 

How should I assign the styles in the graphic editor?



Thank you so much for your work.

Greetings,

Miguel.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

I checked the URL, and everything seems to work perfectly! Note however that 360 degrees is a full circle, so a transform of 360 degrees doesn't do anything visible ;).

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Miguel,

If there's actually a space after the colon, it sure won't work :). Make sure it says ".MoviePoster:hover", without the space.

2019-01-04 10-45-45
Sravan Vanteru

Hi Miguel,

Looks like you have missed closing curly bracket.


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Sravan,

Though his layout sucks, the closing brace is just at the line below.  The @media doesn't have one, but I'm sure it's somewhere out of sight. The problem is in the extra space,  like I said. 

UserImage.jpg
Miguel Verdejo

Sorry, when it was pasted the format has been changed.


I have the hover without space, as you can see.


From the graphic editor, am I calling it well?



Thanks for your answers, greetings.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

In your copy/paste you had -webkit-transform, in the above I see it without the "-". That can't be it though, as the transform should work (there's really no need for the -webkit stuff).

And if that's really all of your CSS, the @media lacks a closing brace if it's not somewhere out of sight (as Sravan more-or-less noted already).

UserImage.jpg
Miguel Verdejo


Excuse me again, this is my complete css. I had deleted "-" since I understood that it was wrong.

I mean right now I have it like this:




It is assumed by the indications that you give me that it is correct.

Could it be that this effect can not be seen in a small resolution? Or what is calling it incorrectly?

In "inspect" (f12) of google chrome, he does not even find it.

Anyway thank you very much. Could you confirm that I call the style correctly?

Thanks greetings and happy day.

2016-04-21 20-09-55
J.
 
MVP

Besides the missing brace, you do have your width in the browser less than 800px?

otherwise it will not trigger.

and regarding your hover with the dev-tools, click on the :hov

there you can mimick the events.


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

@J: Well, the .MoviePoster seems to trigger, per his image.

@Miguel: the "-" should really be in front of "webkit", but better to remove the line altogether. Also, of course you don't see it like that in the devtools of Chome, as this is the onhover; please click the ":hov" button to see what happens.

UserImage.jpg
Miguel Verdejo


Yes, .MoviePoster is activated. 


With -webkit-transform this happens:

With webkit-transform this occurs another:




And if the emulator does not fail, I'm seeing it with a resolution of less than 800px.


That´s my url:

https://miguel-verdejo.outsystemscloud.com/OSMDb/MovieDetail.aspx?MovieId=8&(Not.Licensed.For.Production)=

Thank you again.


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

I checked the URL, and everything seems to work perfectly! Note however that 360 degrees is a full circle, so a transform of 360 degrees doesn't do anything visible ;).

UserImage.jpg
Miguel Verdejo


Ok, I tried another hover effect. When resizing to similar sizes to a smartphone / tablet, different effects are displayed, logically, because the hover is different in mobile.


I've tried it with desktop size and it works.Thank you very much for your help. Together we make Outsystems better.A hug.Miguel.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Don't forget that "hovering" over a touch screen doesn't really exist, so you might not need to implement it for such devices. Happy coding!

UserImage.jpg
Miguel Verdejo

Kilian Hekhuis wrote:

Don't forget that "hovering" over a touch screen doesn't really exist, so you might not need to implement it for such devices. Happy coding!

Thank you so much Kilian, you are a great profesional.


Greetings from Spain.


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Trying my best :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.