CSS transition inner div elements on div hover -

-

i want change opacity of text in div when hover on happens :

currently transition looks this, , moved box bit:

.bg-onebyone {     transition: 0.5s ease;     background: #17b6a4 none repeat scroll 0% 0% !important; }  .bg-onebyone:hover {     margin-top: -8px; }

in div.bg-onebyone have div holding text this

.bg-onebyone .widget-stats .stats-icon {     color: #fff;     opacity: 0.5; }

and want when main div hovered on want increased above opacity in transition. how can ?

<a href="/url">     <div class="widget widget-stats bg-onebyone">         <div class="stats-icon stats-icon-lg">             <i class="fa fa-search fa-fw"></i>         </div>         <div class="stats-desc">creating grouped unmatched aliases</div>     </div> </a>

you need use :hover pseudo-class on parent , select child element.

.bg-onebyone:hover .stats-icon {   opacity: 0.8; }

also .bg-onebyone .widget-stats .stats-icon incorrect html markup since targets .stats-icon grand-child of .bg-onebyone not exist.

output:

.bg-onebyone {    width: 300px;    height: 100px;    transition: 0.5s ease;    background: #17b6a4 none repeat scroll 0% 0% !important;  }  .bg-onebyone:hover {    margin-top: -8px;  }  .bg-onebyone .stats-icon {    color: #fff;    opacity: 0.5;  }  .bg-onebyone:hover .stats-icon {    opacity: 0.8;  }
<div class="widget widget-stats bg-onebyone">    <div class="stats-icon stats-icon-lg">test text opacity      <i class="fa fa-search fa-fw"></i>    </div>    <div class="stats-desc">creating grouped unmatched aliases</div>  </div>


Comments

Post a Comment

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

-
i trying parse date 2014-12-03t10:05:59.5646+08:00 using these 2 formats: yyyy-mm-dd't'hh:mm:ss yyyy-mm-dd't'hh:mm:ssxxx when parse using yyyy-mm-dd't'hh:mm:ss works fine, when parse yyyy-mm-dd't'hh:mm:ssxxx parseexception thrown. which correct format parse date , difference between these 2 formats? note : cannot use joda :( those valid formats: yyyy-mm-dd't'hh:mm:ss.sssz >>> e.g.: 2001-07-04t12:08:56.235-0700 yyyy-mm-dd't'hh:mm:ss.sssxxx >>> e.g.: 2001-07-04t12:08:56.235-07:00 edit: btw, "x" refer (iso 8601 time zone)
Read more

c# - Get rid of xmlns attribute when adding node to existing xml -

-
i have xml-file: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:d>some content</d> </a> </root> i need add new node in specific place, code is: var doc = xdocument.load(file); xnamespace ns2 = "namespace"; doc.element(ns2 + "root").element(ns2 + "a").element(ns2 + "c").addafterself( new xelement(ns2+"new", new xelement("new1", new xelement("new2","some content"), new xelement("new3", "some content")))); the output is: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:new> <new1 xmlns=""> <new2>some content</new2> ...
Read more