Web Analytics Made Easy -
StatCounter [Time Sensitive] Problem with a hover function I implemented - CodingForum

Announcement

Collapse
No announcement yet.

[Time Sensitive] Problem with a hover function I implemented

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Time Sensitive] Problem with a hover function I implemented

    Hello!

    I do a bit of work, for a website that deals with a collectible card game known as MTG. And I've been wanting to come up with a way to display card images on our WP blog, via mousing over their name in each article. Long story short though, I've came across a problem that I need to get resolved ASAP, if at all possible.

    I'd done a bit of research, and found out I could achieve the result I wanted/needed with the help of just a bit of CSS code. I'd first implemented this particular CSS code blog-wide. But this ended up causing a problem, where (using the same page where the problem was noticed) on this page all of the images vanished completely.

    So then, I installed a plugin to where we could just add the CSS code needed, on a post by post basis. Which works perfectly fine on this page, as per it's "design".

    Now here comes the issue I ran into, though.. When you view our main blog page, it's as if the custom CSS code isn't taking effect. And I'd have to guess, that maybe it isn't, since I'm assuming the main blog page is more of a "preview" of posts. I'm just hoping someone here may know a way to help me fix this ASAP. As it really looks bad on us as it is, and I really didn't see this one coming, Lol..


    The "Template" code I'm using for this function:

    Code:
    <a href="Card's Actual Page Link" target="_blank">Card's Name<img src="Card's Actual Image Link"/></a>
    The associated CSS code being used:

    Code:
    a img { display:none; }
    a:hover img { display:block; }
    If anyone has any ideas, please do let me know ASAP! Or if you need any further information as well. And thank you ahead of time for any assistance you can offer!

  • #2
    Give your images a class name like:
    Code:
    <a href="Card's Actual Page Link" target="_blank">Card's Name<img [COLOR="#FF0000"]class="mtgcard"[/COLOR] src="01.jpg"/></a>
    Should give you better control of whats shown:
    Code:
    <style type="text/css">
    .mtgcard {
    	display: none;
    }
    a:hover .mtgcard {
    	display: block;
    }
    </style>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      Use of the above suggestion will indeed give you better control The use of classes is better than using ids as then you can use the same styling rules on all images.

      Comment


      • #4
        Originally posted by sunfighter View Post
        Give your images a class name like:
        Code:
        <a href="Card's Actual Page Link" target="_blank">Card's Name<img [COLOR="#FF0000"]class="mtgcard"[/COLOR] src="01.jpg"/></a>
        Should give you better control of whats shown:
        Code:
        <style type="text/css">
        .mtgcard {
        	display: none;
        }
        a:hover .mtgcard {
        	display: block;
        }
        </style>
        Thank you so very much for this btw, and I apologize for not replying back sooner. But, after all my testing, this definitely does seem to fix the problem I was experiencing. And, if I may say so, you've definitely earned my approval in regards to the worthiness of having that particular Avatar, haha!

        Comment

        Working...
        X