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
– Muhammad Ashikuzzaman, Commented Jul 28, 2014 at 22:46

John_C · Accepted Answer · 2014-07-28 23:33:59Z

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, 2014 at 23:33

John_C

1,1968 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Over a year ago

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?

John_C Over a year ago

probably not without using javascript

Andrew Over a year ago

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 ! :)

Alessandro Incarnati · Accepted Answer · 2014-07-28 22:45:51Z

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, 2014 at 22:45

Alessandro Incarnati

7,2523 gold badges41 silver badges57 bronze badges

5 Comments

Andrew Over a year ago

Thanks for reply! is there by any chance that 'a' element is pre-seleced too like when mouse hover?

Alessandro Incarnati Over a year ago

You are welcome :) What do you mean by preselected? What is the effect you would like to achieve?

Andrew Over a year ago

:), I mean 'a' element will be look like the hovered elements. something like html option tag selected attribute, sorry for my bad english :(

Alessandro Incarnati Over a year ago

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

Andrew Over a year ago

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]:stackoverflow.com/questions/4502633/…

Collectives™ on Stack Overflow

CSS effect when hovering element

2 Answers 2

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related