CODEWITHSUNDEEP
htmlcss
TechieViking
TechieViking

Reputation: 136

Hover effect is not working,even style written for it correct?

I am working on simple design but the problem I'm facing is when i'm hovering on number block i.e 1,2 etc my hover effect is not working for it . I want to hover on li and make the whole text digit which is light green in color to white,the style written for it is correct. I do not where the heck is the problem ..

html

<ul class="results">
    <li>
        <span class="number">1</span>
        <a href="#" target="_blank" class="listitem">
            <p class="title">Lorem</p>
            <p class="desc">Lorem lfdfdfdfdfdsfdfdfdf</p>
        </a>
    </li>
</ul>

css

.results {
    margin:25px 26px;
}

.results li {
    position:relative;
    overflow:hidden;
    background:#f6f6f6;
    margin-bottom:10px;
    list-style:none;
    _width:100%;
}

.results li .number {
    height:90px;
    line-height:90px;
    width:90px;
    font-size:50px;
    color:#a0daca;
    text-align:center;
    position:absolute;
    left:0;
    top:50%;
    margin-top:-45px;
    display:block;
}

.results li a {
    display:block;
    cursor:pointer;
    word-wrap:break-word;
    overflow:hidden;
    text-decoration:none;
    padding:26px 101px 26px 89px;
    position:relative;
}

.results li a .desc {
    display:inline;
    word-wrap:break-word;
    font-size:14px;
    color:#999;
}

.results li a .title {
    font-size:18px;
    color:#666;
    word-wrap:break-word;
    padding-bottom:8px;
    font-family:Montserrat-Regular;
    font-weight:400;
}

#footer {
    height:46px;
    line-height:46px;
    overflow:hidden;
    text-align:center;
    font-size:12px;
    background:#a0daca;
    padding:20px 0;
}

#footer a {
    font-size:12px;
    text-decoration:none;
    color:#fff;
}

.results li:hover .number {
    color:#fff;
}

.results li:hover .listitem {
    background:url(<tag:image_path/>/800017317/arrowhover.png) scroll 98% center no-repeat #a0daca;
}

.results li:hover .title,.results li:hover .desc {
    color:#fff;
}

Please me help to get it done. Here is the js fiddle link

Upvotes: 2

Views: 141

Answers (3)

Naveen
Naveen

Reputation: 830

result layer is overlapped , yes Z-index was the problem.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41872

Just add z-index: 1 and pointer-events: none to .results li .number 

.results li .number {
    z-index: 1;
    pointer-events: none;  /* works in modern browsers */
    /* other styles */
}

Working Fiddle

or

The simple solution would be to apply the image on hover to the li element instead of the a element.

Working Fiddle

The image which you were adding to the a element, on hover, was covering the span element.

Upvotes: 6

Melissa Hie
Melissa Hie

Reputation: 471

You need to put the .numbers block inside the tag http://jsfiddle.net/222cf6yv/7/

<a href="#" target="_blank" class="listitem"><span class="number">1</span>

But I think the core reason is because the line below is not a valid CSS, so whatever CSS you put below it did not get executed:

.results li:hover .listitem {
background:url(<tag:image_path/>/800017317/arrowhover.png) scroll 98% center no-repeat #a0daca;
}

Upvotes: 2

Related Questions