JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 1, 2014 16:34:10 GMT -8
Hi everyone!
Not sure if an actual code exists for this but ---
I'm trying to make an effect on my forum where, if you move your mouse along a few horizontal links a background will slide along behind them as the mouse hovers over each in turn.
In order to get the links to sit in the right spacing along the top of the screen on different resolutions. I have placed each link in its own cell in a table and made the table 100%. There is a cell that holds this table that is 50% of the page. That cell, as it spans the length of all of the links, is the one with the background you can see (the greeny rounded box). This box is positions with percentages so that they stay in line with the links on different resolution screens.
As such, I am looking for a code that, upon me hovering over the link text in the front table cells, the background for the back cell will move along a certain percentage. I have been trying to do this with some form of css hover change and cell ids/<a> tags but it doesn't seem to be working.
Anyone know a way of doing this please?
|
|
inherit
133146
0
Nov 16, 2024 15:51:08 GMT -8
Alanna 🥀🖤
3,564
November 2008
alannab
|
Post by Alanna 🥀🖤 on Jul 1, 2014 18:16:14 GMT -8
|
|
JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 2, 2014 1:43:46 GMT -8
Um yeah I think so. I don't want the background to follow my mouse I want it to only move when I hove over the different links.
Here's my forum: aludiumtest2.boards.net (can't believe I forgot to put this in my original post sorry)
AKA. If I hover over the word Terminal, the rounded square is there, if I hover over the word Dashboard, it will move sideways to backlight that word. But, if my mouse moves from the letter D on Dashboard to the letter b, there should be no shift in the background image - it should remain static until I hover over a new word.
Does that make sense?
I can move the background image to where I want with the background-position: __%; property in the CSS code and make it move smoothly with the transition property. It's just a case of getting the link set up between hovering over one cell's element and causing a different cell's background image movement to trigger.
|
|
JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 3, 2014 13:13:37 GMT -8
bump?
|
|
JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 6, 2014 3:14:26 GMT -8
bump?
|
|
JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 11, 2014 10:27:26 GMT -8
bump?
|
|
JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 11, 2014 10:28:25 GMT -8
Do you have the code for something like that? Only I might be able to have a look and tweak it if it's possible?
|
|
inherit
133146
0
Nov 16, 2024 15:51:08 GMT -8
Alanna 🥀🖤
3,564
November 2008
alannab
|
Post by Alanna 🥀🖤 on Jul 11, 2014 15:52:56 GMT -8
No I don't, only see it on that site I linked.
|
|
JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 12, 2014 7:06:50 GMT -8
No I don't, only see it on that site I linked. Oh okay. Well thanks anyway Bump?
|
|
JD
Full Member
Posts: 771
inherit
180643
0
Sept 27, 2024 15:01:41 GMT -8
JD
771
June 2012
obsidian92
|
Post by JD on Jul 15, 2014 14:57:39 GMT -8
bump?
|
|