Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Highlight Image onMouseover (each separated)

    Hi,
    I have huge problem. I would like to achieve an effect:
    If mouse is over the icon, it will be lighted. Now both are lighted. I would like that it will be each separate. It shouldn't be so complicated


    in php:

    Code:
        <div class="social-icons highlightit">
               <ul>
    			<li><a href="http://150.254.36.80/wige/kandydaci/o-wydziale/" target="_top" rel="me"><img src="/images/wydzial2.png'" title="Wydzial"/></a></li>           
    			<li><a href="http://150.254.36.80/wige/studenci/komunikaty" target="_top" rel="me"><img src="/images/studenci.png'" title="Studenci"/></a></li>           
               </ul>
              </div>
    in CSS

    Code:
    .social-icons {
      background: #000;
      position: fixed;
      right: 0;
      top: 22%;
      padding: 5px 0px;
      border: 1px solid #F27570;
    }
    .social-icons ul {
      margin: 0;
    }
    .social-icons li {
      list-style: none;
      background: none;
      padding: 5px 10px;
      margin: 0;
    }
    .social-icons li img {
      display: block;
    }
    
    .highlightit img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    }
    
    .highlightit:hover img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    You need to apply the “highlightit” class to the list items, not the whole div.

    Or, actually, rather change your CSS to this:
    Code:
    .highlightit a:hover img {
      …
    }

  • Users who have thanked VIPStephan for this post:

    falent (04-28-2013)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a lot You are great

    Could you help me please how to make that the icon will be lighted after it is actived?

    I have added to css:

    Code:
    .highlightit a:active img{
      display: block;
    }
    but it doesn't work http://150.254.36.80/wige/

    I tried to add to html javascript but it still doesn't work

    Code:
    	  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    
    		<script type="text/javascript">
    		$(document).ready(function(){
    			$('#highlightit').each(function(index) {
    				if(this.href.trim() == window.location)
    					$(this).addClass("highlightit a:visited img");
    			});
    		});
    		</script>
    Last edited by falent; 04-28-2013 at 06:53 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •