html - CSS hover effect applying to everything but h4 -



html - CSS hover effect applying to everything but h4 -

i have next scenario:

i'm using bootstrap develop site. when hover list group, suppose have trnasition bluish background color , text should go white. works though styles don't apply h4.

here's css code:

.styled-group-right-item{ padding: 20px; margin-left: 100px; } .limited-list-group{ height: auto; max-height: 500px; overflow-y: scroll; } .author-pubdate-info{ font-weight: bold; } .list-group-item-switchhon-blog:hover{ transition: 0.5s ease !important; color: #fff !important; background-color: #2980b9 !important; } .list-group-item-switchhon-blog{ transition: 0.5s ease; }

and here markup:

<div class="list-group limited-list-group"> <a href="#" class="list-group-item clearfix list-group-item-switchhon-blog"> <div class="pull-left"> <img src="http://placehold.it/100x100" class="btn-center"> </div> <div class="styled-group-right-item"> <h4 class="list-group-item-heading">lorem ipsum dolor sit down amet</h4> <p class="list-group-item-text">lorem ipsum dolor sit down amet, consectetur adipiscing elit. sed eget interdum libero. vivamus pharetra faucibus.</p> <span class="author-pubdate-info">autor: john doe | fecha: 11 de noviembre de 2014</span> </div> </a> </div>

and here's fiddle: http://jsfiddle.net/y7d5fm1w/

what have tried far: add together class this:

.list-group-item-switchhon-blog:hover h4{ transition: 0.5s ease !important; color: #fff !important; background-color: #2980b9 !important; }

but creates funny effect, seek on fiddle, it's not good.

any ideas how apply styles h4, please i'm ears.

apply style h4 as well. also, place transition on non hover state; ensures transition apply in , out of hover state.

aside: if alter overflow-y: scroll overflow-y: auto, scrollbar if content overflows.

changes .list-group-item-switchhon-blog, .list-group-item-switchhon-blog h4 { /* transition here */ transition: 0.5s ease !important; } .list-group-item-switchhon-blog:hover { color: #fff !important; background-color: #2980b9 !important; } .list-group-item-switchhon-blog:hover h4 { /* add together */ color: #fff !important; } working example

class="snippet-code-css lang-css prettyprint-override">.styled-group-right-item { padding: 20px; margin-left: 100px; } .limited-list-group { height: auto; max-height: 500px; overflow-y: auto; } .author-pubdate-info { font-weight: bold !important; } .list-group-item-switchhon-blog, .list-group-item-switchhon-blog h4 { transition: 0.5s ease !important; } .list-group-item-switchhon-blog:hover { color: #fff !important; background-color: #2980b9 !important; } .list-group-item-switchhon-blog:hover h4 { color: #fff !important; } .list-group-item-switchhon-blog { transition: 0.5s ease; } class="snippet-code-html lang-html prettyprint-override"><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="list-group limited-list-group"> <a href="#" class="list-group-item clearfix list-group-item-switchhon-blog"> <div class="pull-left"> <img src="http://placehold.it/100x100" class="btn-center"> </div> <div class="styled-group-right-item"> <h4 class="list-group-item-heading">lorem ipsum dolor sit down amet</h4> <p class="list-group-item-text">lorem ipsum dolor sit down amet, consectetur adipiscing elit. sed eget interdum libero. vivamus pharetra faucibus.</p> <span class="author-pubdate-info">autor: john doe | fecha: 11 de noviembre de 2014</span> </div> </a> </div>

html css twitter-bootstrap

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more