5 Replies - 6417 Views - Last Post: 26 June 2012 - 01:13 AM

#1 Anirbas91   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 29-December 11

How can I make an object move with a mouse over?

Posted 14 June 2012 - 02:51 PM

I'm still new to building web pages. Right now I'm trying to get my chopsticks to move to the next item when I put my mouse on them. Does anyone know where I can look? I'm trying to do something similar to this: http://www.bonanza.com/

Anything helps :]
Thanks
Is This A Good Question/Topic? 0
  • +

Replies To: How can I make an object move with a mouse over?

#2 exiles.prx   User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 241
  • Joined: 22-November 10

Re: How can I make an object move with a mouse over?

Posted 14 June 2012 - 04:28 PM

I don't think there is anyway CSS alone can take care of that type of animation. You will have to use java script in order to replicate parts of the animation on bonanza.com to work properly. Look into using jQuery's animate function.
Was This Post Helpful? 0
  • +
  • -

#3 Anirbas91   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 29-December 11

Re: How can I make an object move with a mouse over?

Posted 14 June 2012 - 05:58 PM

I thought I had to use another language. I just wasn't use which. Thanks. I'll look into that
Was This Post Helpful? 0
  • +
  • -

#4 .Pollux   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 16-June 12

Re: How can I make an object move with a mouse over?

Posted 16 June 2012 - 01:56 PM

Well if you're talking about those on-hover moving menu items (pages) on the left hand side that can be done with css, however, having it connected with a slider, im not sure. The way its done is using the transition tag.

So for example:
h1 {
  transition: padding-left 1s, box-shadow 2s;
}

h1:hover {
  padding-left: 10px;
  box-shadow: 0px 0px 0px 10px black;
  
}


Was This Post Helpful? 0
  • +
  • -

#5 denting5   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 84
  • Joined: 03-June 12

Re: How can I make an object move with a mouse over?

Posted 24 June 2012 - 03:05 PM

If you would be willing to use something slightly older, try giving Time 2.0 a spin. It is quite robust and well documented, if obsolete.
Was This Post Helpful? 0
  • +
  • -

#6 amit.soni   User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: How can I make an object move with a mouse over?

Posted 26 June 2012 - 01:13 AM

i made the same effect using jquery...
check out this fiddle

http://jsfiddle.net/...7soni/pWzFH/27/


Happy Coding :)

This post has been edited by amit.soni: 26 June 2012 - 01:15 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1