5 Replies - 732 Views - Last Post: 10 June 2013 - 12:04 PM

#1 designer22  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 10-June 13

Css hover elements

Posted 10 June 2013 - 09:55 AM

Hi My html markup:


<div class="ourservices">	
                
<img class="decorationicon" src="/img/decorationicon.jpg" alt="decoration">
<p class="service">Home Services</p>

    <p class="heading"><a href="#">HOME DECORATION</a><br><span class="date">07.12.2013 </span><p>
	<p class="description"><a href="#">A BEAUTIFUL MESS IS ALL ABOUT CREATING A BEAUTIFUL LIFE. </a></p>
					

									
                    	<div class="button">
                                    	<a class="readmore" href="#">READ MORE SERVICES</a>
                                      
                                        	</div><!--button-->
                        	
                            
                            	
                                	
                                    	</div><!--ourservices-->
                                        


When i hover button i want something like this. Sorry i'm begginer at css.

http://i.imgur.com/tMVVspH.png

Is This A Good Question/Topic? 0
  • +

Replies To: Css hover elements

#2 squibby  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 86
  • Joined: 21-January 12

Re: Css hover elements

Posted 10 June 2013 - 10:41 AM

Use hover state to change the color of a class when you move the mouse over it. e.g

.anyclassyouwant:hover {background-color:blue;}



If you want anything more complex i.e changing various elements when you rollover a specific element look at using some simple jquery functions. Hope that helps.

This post has been edited by squibby: 10 June 2013 - 10:48 AM

Was This Post Helpful? 0
  • +
  • -

#3 designer22  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 10-June 13

Re: Css hover elements

Posted 10 June 2013 - 10:59 AM

Hi, can you please check the image? can't i do this with css?
I'm trying

.div1, .div2, .div3 {background-color:blue;} 
I'm trying this but it doesnt work.

This post has been edited by Dormilich: 10 June 2013 - 02:47 PM

Was This Post Helpful? 0
  • +
  • -

#4 squibby  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 86
  • Joined: 21-January 12

Re: Css hover elements

Posted 10 June 2013 - 11:13 AM

You mean you want the image to change or the background of the image to change? If you want to change the image you will need to have 2 images. And on hover change the image link.

In css this can be done but there will often be a slight delay if the site is not already cached in the browser. To avoid this you can create an image sprite, Which is both images connected as one image and then use css to jump between different locations of the image.

A good way to make an image sprite's css is by using this site http://www.spritecow.com/

You can load up an image you want to use and then click to display relevant css.
Was This Post Helpful? 0
  • +
  • -

#5 designer22  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 10-June 13

Re: Css hover elements

Posted 10 June 2013 - 11:35 AM

Thank you so much great site. But my question is. I want to change text color when i hover button? like in the picture. when i hover the button(link) i want to cther 2 elements (text) colors?

This post has been edited by Dormilich: 10 June 2013 - 02:47 PM

Was This Post Helpful? 0
  • +
  • -

#6 squibby  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 86
  • Joined: 21-January 12

Re: Css hover elements

Posted 10 June 2013 - 12:04 PM

This will highlight the elements you give a class of 'change' to. the jquery code can be used like this or various other ways. but this should give you an idea how seperate elements can be change and triggered from another. If you are not to sure about jquery spend a few days testing stuff out with it. It will make your life a lot easier.



<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#rollover").mouseover(function(){
    $(".change").css("color"," blue");
  });
  $(".change").mouseout(function(){
    $(".change").css("color","black");
  });
});
</script>
</head>
<body>

<p class = "change">Some Text</p>
<p class = "change">some words</p>
<p class = "change">Some more stuff</p>


<p id = "rollover">Move the mouse pointer over this paragraph.</p>

</body>
</html>



This post has been edited by squibby: 10 June 2013 - 12:05 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1