html - List group not working inside panel (Bootstrap) -


As the title, I was trying to create a project where the user can choose an item from the side and with information It shows .

Although it seems really simple, I tried to do this inside a panel, as if the JSFDLL was linked below but due to some unknown reason it breaks. You are no longer hover and its dark background, I thought I made a simple mistake, so I have created a mock up site which is to test with very nude information, so you can get hundreds of codes Do not go.

Here's the way, as you can see that there is no mistake, even then it does not work ... I was thinking that this is just a bug and if such a fix is ​​specified Can do?

  & lt; Div class = "row" & gt; I am using deep theme bootswitch for my CSS  

(Ignore the code from this jsfiddle only) & Lt; Div class = "col-md-6" & gt; & Lt; H1 & gt; this does not work! & Lt; / H1> & Lt; Div class = "panel panel-priority" & gt; & Lt; Div class = "panel-title" & gt; & Lt; H3 class = "panel-title" & gt; Panel Primary & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; & Lt; Div class = "list-group" & gt; & Lt; A href = "#" class = "list-group-item activated" & gt; Cos Ohlo Audio & lt; / A & gt; & Lt; A href = "#" class = "list-group-item" & gt; & Lt; / A & gt; In Dapibus ac immediisis & lt; A href = "#" class = "list-group-item" & gt; Morbi leo rhesus & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-6" & gt; & Lt; H1 & gt; Does it work! & Lt; / H1> & Lt; Div class = "list-group" & gt; & Lt; A href = "#" class = "list-group-item activated" & gt; Cos Ohlo Audio & lt; / A & gt; & Lt; A href = "#" class = "list-group-item" & gt; & Lt; / A & gt; In Dapibus ac immediisis & lt; A href = "#" class = "list-group-item" & gt; Morbi leo rhesus & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - jQuery (Bootstrap JavaScript plugin required) - & gt; & Lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" & gt; & Lt; / Script & gt; & Lt ;! - Include all compiled plugins (below), or include personal files as needed - & gt;

The actual links are clickable and in both cases the work is not just hover effect

The fix was simple because I thought it would be:

< Pre> `& lt; Style type = "text / css" & gt; A.list-group-item: hover {background-color: red; } & Lt; / Style & gt; `

This is working. background color / Code> is changing from # 303030 to transparent .

This allows to show background color from behind the item. In the second case, the background color for that background is coming from # 222 ( body element.)

In the first case, the background color is # 303030 (Coming from .panel ) - which means it has the same color as the already hovered a.list-group-item So, it seems that the hover is not doing anything.

However, it works.

If you are after a different color, then you have to start customizing yourself to get the desired color automatically to bootstrap.


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -