css - fadeout on mouseout using keyframes? -

-

i'm using keyframes animation , i'm using markers when hover on them, information or picture appear. added fade-in, don't know how fade out.
have keyframes part: 

@keyframes fadeout { 0% {   opacity: 1;} 100% {opacity: 0;} } .fadeout { -webkit-animation-name: fadeout; animation-name: fadeout; }

and animation part (?) want insert:

animation-duration: 0.5s; animation-name: fadeout;

i guess problem don't know how insert it.

this codepen i'm using:

http://codepen.io/aslenwhitmore/pen/rxlygq?editors=0100

so can tell me should insert fadeout? thanks!

you can achieve desired effect using transition property triggers opacity state on hover. there no need of javascript since css allows manipulate children of selector on hover or other states.

see codepen fork working example

since css cannot transition display property, we'll use opacity , z-index.

the z-index hide elements under document (z-index:-1) , bring them 999 once activated

hover code

&:hover .map-marker-info {     opacity:1;     z-index:999; }

static code

&-marker-info {    display: block;    transition:0.3s;    opacity: 0;    z-index: -1; }

p.s recommend increase radius of hover zone make points more user friendly


Comments

Post a Comment

Popular posts from this blog

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more