how to show the foreground of a class filled with a certain color or image?

suppose i have the following code:

 <a class="admin" href="do_with_logo.php">


 <div class="logo">
 <img src="uploads/<?php echo $item ?>"  >
 </div> <!-- end of class logo-->


 </a> <!-- end of class admin>-->

When I hover mouse on the 'admin' class i want the full area of the class to show red color. That is whatever exi开发者_如何学JAVAsts in the 'admin' class, mouse hovered on the class will make it show up prominently red. No problem if the content behind looks blurred or invisible.

I need it to give the admin panel the ability to hover mouse on the homepage and see which part they can change with dynamic input i.e. area showing red color can take them to the dynamic input page of that corresponding area on mouseclick.

Thanks in advance Istiaque Ahmed Bangladesh

It sounds like you're wanting to fill the box with a solid color, hiding the elements inside (while keeping the dimensions consistent). I went with the following (online at http://jsfiddle.net/2rhKC/)

<a class="admin" href="do_with_logo.php">
    <span>Hello World. This is my text.</span>
</a>

a.admin {
 display:inline-block;
 padding:5px 10px;
 background-color:#f1f1f1;
}
a.admin:hover {
 background-color:#a52401;   
}
a.admin:hover span {
 visibility:hidden;   
}

You'll note that I'm styling my a with an inline-block declaration, and removing the inner div element. Also, when I hover the link we set the visibility of the immediate child element (a span in this case) to hidden. All of your child elements should go within the span, thus all will be hidden when you mouse over the link.

$('.admin').hover(function(){
  $(this).attr('style', 'background-color:red');
});

That should do the trick.

The foreground-color in CSS only affects text, like defined here: http://www.w3.org/TR/css3-color/#foreground - If you want some kind of overlay in your element, you'd have to create a dedicated markup-element like an image for this.

Suppose you have div or p with class admin that contains your interactive elements:

<div class="admin">
    <img class="overlay" src="some/path/overlay.png" alt="">
    <a class="admin_link" href="do_with_logo.php">Do sth.</a>
</div>

Now you define a CSS rule to show the overlay-image when users hover over the admin-div:

div.admin:hover .overlay {display:block;}

Otherwise the image is hidden:

div.admin .overlay {display:none;}

The image should also strech to the whole width + height of the parent div

div.admin .overlay {width:100%;height:100%}

Hope this helps!