CODEWITHSUNDEEP
htmlcss
Louis93
Louis93

Reputation: 3923

The li:hover behaviour for my list is unpredictable?

I'll post a JSFIddle if necessary, that would take a bit of effort since I'm using a markup language, but go here: http://mixtape.meteor.com

Below is the relevant CSS code. 

.list_element .next_song{
    cursor: pointer;
    color:white;
    margin-top:-38px;
    margin-left:29%;

    display:none;
    position: absolute;
}

.list_element .destroy {
    cursor: pointer;
    color:white;
    margin-top:-38px;
    margin-left:32%;

    display:none;
    position: absolute;
}

.list_element:hover .destroy{
    display:block;
}

.list_element:hover .next_song{
    display:block;
}

Upvotes: 1

Views: 38

Answers (1)

Neversay
Neversay

Reputation: 81

Try to add position:relative at element_style, so the position:absolute will fit into the container. And then the only work for you is adjust the align of those buttons.

.element_style {
    position: relative;
    ......

.list_element .next_song {
    right: 10%;
    ......

.list_element .destroy {
    right: 0%;
    ......

Upvotes: 2

Related Questions