CSS effect when hovering element

Question

I have a CSS like this:

#poll_list {
    margin: 0;
}
#poll_list li {
    height: 50px;
    list-style-type: none;
    font-size: 20px;
    border-bottom: 5px solid white;
    background-color: #cfcfcf;
    position: relative;
}
#poll_list a {
    text-decoration: none;
    line-height: 50px; /*need to match #poll_list li for text in middle*/

    display: inline-block;
    *display: block;
    *zoom: 1;

    width: 100%;
    height: 50px;   
}
#poll_list a:link, #poll_list a:visited {
    color: black;
}
#poll_list a:hover {
    color: white;
}
#poll_list li.first_topic_list, #poll_list li:hover  {
    color: #F0F0F0;
    background-color: slateblue;
}
#poll_list li.first_topic_list:after, #poll_list li:hover:after  {
    position: absolute;

    top: 0;
    bottom: 0;
    left: -20px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid slateblue;

    content: "";
}

for an HTML list like this:

<ul id="poll_list">
    <li class='first_topic_list'><a id='first_topic' href='#'>a</a></li>
    <li><a class='topic' href='#'>b</a></li>
    <li><a class='topic' href='#'>c</a></li>
    <li><a class='topic' href='#'>d</a></li>
    <li><a class='topic' href='#'>e</a></li>
    <li><a class='topic' href='#'>f</a></li>
    <li><a class='topic' href='#'>g</a></li>
</ul>

See this as live demo in JSFiddle.

I want 'a' to behave like all other elements when all other elements are not hovered. This effect should be added to the top of the above CSS.

Sorry for my bad english. In my mind I have something like this:
only 'a' is pointing to left->user mouseenter effect on all others elements will make it points to the left->'a' not pointing again

something like html option tag selected attribute. selected option is preserved, and user can select others options which it then will highlight the option. If user choose back the selected option, selected option will be highlighted and no others will be.

Means when another 'a' is hovered first "a"'s color will become simple like others? — Muhammad Ashikuzzaman, Jul 28 '14 at 22:46

score 1 · Accepted Answer · answered Jul 28 '14 at 23:33

1

Is this the effect you want; where the first link is pre-selected but looses its higlighting when hovering over another link?

http://jsfiddle.net/John_C/N6Gcx/

The main part of my solution is using different :hover selectors for each of the possibilities.

#poll_list li:hover  {
  color: black;
  background-color: slateblue;
}
#poll_list:hover li.first_topic_list{
  color: #cfcfcf;
  background-color: #cfcfcf;
}
#poll_list li.first_topic_list{
  color: #F0F0F0;
  background-color: slateblue;
}
#poll_list:hover li.first_topic_list:hover{
  color: #F0F0F0;
  background-color: slateblue;
}

answered Jul 28 '14 at 23:33

John_C

1,116
8
17

yess :) just one minor question, can 'a' not be the selected element after mouse leave the lists but instead of the last `li` that the mouse hovered? – Andrew Jul 28 '14 at 23:47
probably not without using javascript – John_C Jul 28 '14 at 23:51
opps, but that's still very close to what I wanted so I will give you the up vote. If possible I would love to come by to hug you and give my appreciation ! :) – Andrew Jul 29 '14 at 00:00

score 0 · Answer 2 · answered Jul 28 '14 at 22:45

0

You need to remove #poll_list li.first_topic_list from the CSS properties you applied.

Replace your code with:

#poll_list {
    margin: 0;
}
#poll_list li {
    height: 50px;
    list-style-type: none;
    font-size: 20px;
    border-bottom: 5px solid white;
    background-color: #cfcfcf;
    position: relative;
}
#poll_list a {
    text-decoration: none;
    line-height: 50px; /*need to match #poll_list li for text in middle*/

    display: inline-block;
    *display: block;
    *zoom: 1;

    width: 100%;
    height: 50px;   
}
#poll_list a:link, #poll_list a:visited {
    color: black;
}
#poll_list a:hover {
    color: white;
}
#poll_list li:hover  {
    color: #F0F0F0;
    background-color: slateblue;
}
#poll_list li:hover:after  {
    position: absolute;

    top: 0;
    bottom: 0;
    left: -20px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid slateblue;

    content: "";
}

Check this fiddle: http://jsfiddle.net/CYtK5/2/

answered Jul 28 '14 at 22:45

Alessandro Incarnati

7,018
3
38
54

Thanks for reply! is there by any chance that 'a' element is pre-seleced too like when mouse hover? – Andrew Jul 28 '14 at 22:49
You are welcome :) What do you mean by preselected? What is the effect you would like to achieve? – Alessandro Incarnati Jul 28 '14 at 22:49
:), I mean 'a' element will be look like the hovered elements. something like html option tag selected attribute, sorry for my bad english :( – Andrew Jul 28 '14 at 23:00
You can style that in CSS if you want to have a preselected element. Create a class in CSS and call it "preselected" for instance and give it whatever properties you need to. If you post me a screenshot it would be better :) Otherwise try google translate :P – Alessandro Incarnati Jul 28 '14 at 23:06
I have the idea of another SO topic [How to affect other elements when a div is hovered][1], but dont know why it doesnt work in my situation -_- [1]:http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – Andrew Jul 28 '14 at 23:23

CSS effect when hovering element

2 Answers2