javascript - Change class of active bootstrap button on hover -

-

if want change class of bootstrap button on hover jquery, styling of button changes new custom class, add "addclass":

<div id="tile-sort" class="btn-group" data-toggle="buttons">     <label id="sort-hello" class="btn btn-primary btn-xs">         <input type="radio" name="sort-option" value="hello">hello     </label> </div>

the below code works:

$('#tile-sort').hover(     function() {         $('.btn-primary').addclass('sort-hover-nonactive');     },     function() {         $('.btn-primary').removeclass('sort-hover-nonactive');     } );

however, if attempt change class of "active" bootstrap button on hover jquery:

<div id="tile-sort" class="btn-group" data-toggle="buttons">     <label id="sort-goodbye" class="btn btn-primary btn-xs active">         <input type="radio" name="sort-option" value="goodbye">goodbye     </label> </div>

the below code does not work:

$('#tile-sort').hover(     function() {         $('.btn-primary.active').addclass('sort-hover-active');     },     function() {         $('.btn-primary.active').removeclass('sort-hover-active');     } );

can point me in correct direction class adding/removing happen?

looks issue might coming somewhere else, maybe didn't set !important on custom css?

i've tried follows:

.sort-hover-active {     background-color:red !important; }

here demo

edited:

following comments of @jshthornton, edited code more in line bootstrap's native code. here did:

$('#tile-sort').hover(     function() {         $('#sort-goodbye').removeclass('btn-primary').addclass('btn-danger');     },     function() {         $('#sort-goodbye').removeclass('btn-danger').addclass('btn-primary');     } );

this way you're making use of existing bootstrap code instead of applying cumbersome workarounds !important should preferably avoided, if possible.

and here demo of that


Comments

Post a Comment

Popular posts from this blog

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

c# - Avoiding duplicate methods for Task and Task<T> -

-
i have logic task , task<t> . there way avoid duplicating code ? my current code following: public async task<socialnetworkuserinfo> getme() { return await wrapexception(() => new socialnetworkuserinfo()); } public async task authenticateasync() { await wrapexception(() => _facebook.authenticate()); } public async task<t> wrapexception<t>(func<task<t>> task) { try { return await task(); } catch (facebooknointernetexception ex) { throw new noresponseexception(ex.message, ex, true); } catch (facebookexception ex) { throw new socialnetworkexception("social network call failed", ex); } } public async task wrapexception(func<task> task) { try { await task(); } catch (facebooknointernetexception ex) { throw new noresponseexception(ex.message, ex, true); } catch (facebookexception ex) { throw new soci...
Read more

javascript - Which segment of a polyline was clicked? -

-
i have set sample polyline 5 segments , , i'm allowing new markers created when user clicks on polyline. i'd know if there's foolproof way determine whether new marker between markers 0 , 1, or 1 , 2 ... or between 4 , 5. i've considered checking if new marker inside bounding box, , point-in-line formulas, neither 100% precise. as google maps uses mercator projection projecting gps coordinates, can't use 'line equation' gps coordinates, because projection not linear gps points.but instead can use world coordinates linear. here have used parametric form of line equation check whether point on segment: function ispointonsegment( map, gpspoint1, gpspoint2, gpspoint ){ var p1 = map.getprojection().fromlatlngtopoint( gpspoint1 ); var p2 = map.getprojection().fromlatlngtopoint( gpspoint2 ); var p = map.getprojection().fromlatlngtopoint( gpspoint ); var t_x; var t_y; //parametric form of line equation is: //-...
Read more