WordPress.org

1. csdrcheer
   Member
   Posted 3 years ago #

   I was wondering if there is any specific kind of css code using hover codes for content entries to display two different kind of colors?
   --------------------
   Example:

   #content
   margin: 0px 0px 0px 0px;
   border:1px solid #000;

   #content:hover
   border-bottom: 1px solid #ED8332;
   background-color: #999;
   ----------------------

   Yeah, I played with it and found it really liking however I want two different hover colors when scrolling over mouse on each entries.

   Any idea how to do that?

   I use andreas09 theme but I tweaked alot.

   Thanks!

2. chradil
   Member
   Posted 3 years ago #

   many themes (i've built my own for my personal site, and do for most client sites) include a means to alternate the style/background, etc for things like comments. What you're trying to do is possible, you'll need to implement some type of alternating styles mechanism first even something simple like #contenteven and #contentodd or similar should be fine.

   if you take a look at the full posts page which displays all comments you'll note than many themes have the code in there to do the alternating styles for every other comment, you'll just want to adapt that a bit for your actual posts. I'm not sure if your particular theme does this for comments, if not, just check out how it's done with something like default.

   ....c

3. doodlebee
   Member
   Posted 3 years ago #

   For the record, this will not work in IE. IE doens't recognize the :hover pseudoclass element on anything but anchor links.

   You'll need some javascript to force IE to recognize :hover on other things.

4. chradil
   Member
   Posted 3 years ago #

   actually, the :hover and :focus pseudo classes do work with some other elements in IE, it's more dependant on correctly nesting or "cascading" your css -- example, you can get them to work on things like form elements with no javascript but not if you simply declare a .new_class, it would need to be more explicit, like #formID element:focus { whatever } instead of <form class="new_class"> , etc.

   ...c

5. doodlebee
   Member
   Posted 3 years ago #

   can I see some documentation on that? I've been doing design for years, and, until IE7, :hover only works on anchor links in IE. Unless you use a javascript to override it.

   If my past experience is wrong, I'd love to see some links that explain this so I can pass them along to Eric Meyer's list - I *know* they'd be interested.

   (Form elements are not what I'm interested in - my comment was directed at the original poster's question - causing a div on hover to change the etxt color - a situation like that. Form elements and the like, I'm aware of.)

6. csdrcheer
   Member
   Posted 3 years ago #

   Very cool! Just a little FYI, I'm not expert with CSS or javascript coding so I'm hoping anyone with coding gurus will help me out with coding. I know there are alot of possibilities when it come to making a word press site.

   If you take a look at my test site at http://www.csdrcheer.com/index.php and move your mouse on entries, you will see a color hover active. I know it's working but close enough to what I want but I want alternative like: contenteven and contentodd. The problem is the content code itself is one straight coding. I need to figure out how to tell that php code to read contenteven and contentodd CSS to display it. Hmmm

   Here's my current code for content entries. This is in my main index template file.

   ----------------------
   < div class="entry" >
   < ?php the_content(__('Read the rest of this entry »','andreas09')); ? >
   < /div >
   ----------------------

   I just forgot that it could work on comments, too. I'm taking one step at time which I want to begin with content entries, first. :)

   I use Firefox so I may have to test it out on IE and probably add javascript to force it like ya'll said.

   If someone with coding expert can write up a little code for specific CSS and html/php codes for me, gimme! gimme! gimme! :D Thanks!

7. csdrcheer
   Member
   Posted 3 years ago #

   chradil and doodlebee,

   Care to show me how to write up either with or without javascript to force IE to recongize the :hover pseudo classes???

   I'm a little bit lost and confusing about that... any helpful tips would be nice.

   Thanks in advance!

8. csdrcheer
   Member
   Posted 3 years ago #

   bump

Topic Closed

This topic has been closed to new replies.