2

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

2
  • 1
    Always post relevant code in the question. Nov 25, 2014 at 7:46
  • @Bhojendra-C-LinkNepal fiddle is there ..can u pls check? Nov 25, 2014 at 7:47

3 Answers 3

6

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.

4
  • @king You didn't mention what to happen on click? if you want to see a hand cursor instead of normal cursor, then use cursor: pointer.
    – Mr_Green
    Nov 25, 2014 at 7:56
  • I think his CSS is broken because of <tag:image_path/> Nov 25, 2014 at 7:56
  • @MelissaHie yeah.. not sure whether OP mentioned that to not show the exact image path or using some kind of scripting language to generate the css. :/
    – Mr_Green
    Nov 25, 2014 at 7:59
  • @Mr_Green Cursor can be shown but click wont work .i want it to working Nov 25, 2014 at 8:01
2

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;
}
5
  • ....Thanks Ideally ,u r right but i have a condition i cant put that span inside the a tag Nov 25, 2014 at 7:54
  • see my edit above. you need to fix the .results li:hover .listitem. <tag:image_path/>/800017317/arrowhover.png is not a valid CSS and did not get executed properly. you need a valid path to the image. Nov 25, 2014 at 7:55
  • Thanks not valid that actually a framework v r using ...just ignore it..but may its covering the span element Nov 25, 2014 at 7:59
  • okay, i got the issue. you need to put the hover green color on .results li:hover instead of .listitem. I can elaborate more on why if you want, but here is a working fiddle (see line 65). I believe this satisfies all your req jsfiddle.net/222cf6yv/15 Nov 25, 2014 at 8:02
  • Bingo!! u did it ...Thank you very much :) Nov 25, 2014 at 8:14
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.