javascript - JQuery, CSS and hover tag re-code - 


.social-icon-holder {    float: left;    padding-left: 10px;  }    .social-icon {    width: 40px;    height: 40px;    font-size: 30px;    text-decoration: none;    cursor: pointer;    text-align: center;    line-height: 40px;    position: relative;    -moz-transition: 0.5s;    -o-transition: 0.5s;    -webkit-transition: 0.5s;    transition: 0.5s;    /*  background: #000;*/    color: #fff;    float: left;    -moz-border-radius: 100%;    -webkit-border-radius: 100%;    border-radius: 100%;    border: 3px solid #fff;  }    .social-icon:hover {    color: #fff;    -moz-transform: rotatey(-180deg);    -webkit-transform: rotatey(-180deg);    transform: rotatey(-180deg);  }    .social-icon:hover .front {    -moz-backface-visibility: hidden;    -webkit-backface-visibility: hidden;    backface-visibility: hidden;  }    .social-icon:hover .back {    -moz-backface-visibility: visible;    -webkit-backface-visibility: visible;    backface-visibility: visible;  }    .social-icon .front,  .social-icon .back {    width: 40px;    height: 40px;    position: absolute;    -moz-border-radius: 100%;    -webkit-border-radius: 100%;    border-radius: 100%;    -moz-backface-visibility: visible;    -webkit-backface-visibility: visible;    backface-visibility: visible;  }    .social-icon .back {    -moz-transform: rotatey(-180deg);    -webkit-transform: rotatey(-180deg);    transform: rotatey(-180deg);    -moz-backface-visibility: hidden;    -webkit-backface-visibility: hidden;    backface-visibility: hidden;  }    .social-icon .twitter .back {    background: #00aced;  }
<div class="social-icon-holder">    <div class="social-icon">      <div class="twitter">        <div class="front">t</div>        <div class="back">t</div>      </div>    </div>  </div>

jsfiddle here

i did not produce majority of code.

the icon flips/rotates when user hovers on icon. realize done via hover class.

however trigger animation manually (via event etc).

i understand not possible trigger hover not trusted event.

can me re-code animation triggered via jquery?

in css set hover states, add selector same specific class. in example added class hover, line .social-icon:hover becomes .social-icon:hover, .social-icon.hover etc.

you can toggle class using jquery's .toggleclass() function.

in below example using button , click event.

i added background color icon more visible, has nothing actual answer ;)

$('#triggerhover').on('click', function() {    $('.social-icon').toggleclass('hover');  });
body {   background: #ccc;  }    .social-icon-holder {    float: left;    padding-left: 10px;  }    .social-icon {    width: 40px;    height: 40px;    font-size: 30px;    text-decoration: none;    cursor: pointer;    text-align: center;    line-height: 40px;    position: relative;    -moz-transition: 0.5s;    -o-transition: 0.5s;    -webkit-transition: 0.5s;    transition: 0.5s;    /*  background: #000;*/    color: #fff;    float: left;    -moz-border-radius: 100%;    -webkit-border-radius: 100%;    border-radius: 100%;    border: 3px solid #fff;  }    .social-icon:hover, .social-icon.hover {    color: #fff;    -moz-transform: rotatey(-180deg);    -webkit-transform: rotatey(-180deg);    transform: rotatey(-180deg);  }    .social-icon:hover .front, .social-icon.hover .front {    -moz-backface-visibility: hidden;    -webkit-backface-visibility: hidden;    backface-visibility: hidden;  }    .social-icon:hover .back, .social-icon.hover .back {    -moz-backface-visibility: visible;    -webkit-backface-visibility: visible;    backface-visibility: visible;  }    .social-icon .front,  .social-icon .back {    width: 40px;    height: 40px;    position: absolute;    -moz-border-radius: 100%;    -webkit-border-radius: 100%;    border-radius: 100%;    -moz-backface-visibility: visible;    -webkit-backface-visibility: visible;    backface-visibility: visible;  }    .social-icon .back {    -moz-transform: rotatey(-180deg);    -webkit-transform: rotatey(-180deg);    transform: rotatey(-180deg);    -moz-backface-visibility: hidden;    -webkit-backface-visibility: hidden;    backface-visibility: hidden;  }    .social-icon .twitter .back {    background: #00aced;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="social-icon-holder">    <div class="social-icon">      <div class="twitter">        <div class="front">t</div>        <div class="back">t</div>      </div>    </div>  </div>  <button id="triggerhover">click me!</button>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more