Styjun

How to assign captions for two tables in LaTeX?

The logistics of corpse disposal

Withdrew £2800, but only £2000 shows as withdrawn on online banking; what are my obligations?

When -s is used with third person singular. What's its use in this context?

Is there a concise way to say "all of the X, one of each"?

Check which numbers satisfy the condition [A*B*C = A! + B! + C!]

How to say 'striped' in Latin

Does accepting a pardon have any bearing on trying that person for the same crime in a sovereign jurisdiction?

Should I call the interviewer directly, if HR aren't responding?

Why is black pepper both grey and black?

What happens to sewage if there is no river near by?

Is it possible to boil a liquid by just mixing many immiscible liquids together?

Stars Make Stars

Is the Standard Deduction better than Itemized when both are the same amount?

Output the ŋarâþ crîþ alphabet song without using (m)any letters

How to recreate this effect in Photoshop?

How do I keep my slimes from escaping their pens?

Right-skewed distribution with mean equals to mode?

Is a manifold-with-boundary with given interior and non-empty boundary essentially unique?

Did Xerox really develop the first LAN?

What causes the vertical darker bands in my photo?

Sorting numerically

If Jon Snow became King of the Seven Kingdoms what would his regnal number be?

WAN encapsulation

How to make flood fill rollover buttons?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I have a simple web page for homework. It has rollover buttons for each week, they change colour on mouseover. Very old!

Now this is no kind of advertising, I have nothing to do with them, except, now and again I play lotto here. (Just to show the buttons.)

They had problems with the authorities in Spain and were offline a while. Now they are back with cool rollover buttons which flood fill.

My webpage is very simple, but I have rollover buttons lined up just like in the link.

Could anyone give me a pointer, link, tip as to how this is done?

html css

share|improve this question

asked Mar 22 at 8:13

PedroskiPedroski

1817

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Go to the lotto page, open the browser console and have a look at the button's css. You'll find some hints when you investigate the a-element and it's ::after-element.
  
  – Paflow
  Mar 22 at 8:18
  

  
  
  
  

add a comment | 

0

I have a simple web page for homework. It has rollover buttons for each week, they change colour on mouseover. Very old!

Now this is no kind of advertising, I have nothing to do with them, except, now and again I play lotto here. (Just to show the buttons.)

They had problems with the authorities in Spain and were offline a while. Now they are back with cool rollover buttons which flood fill.

My webpage is very simple, but I have rollover buttons lined up just like in the link.

Could anyone give me a pointer, link, tip as to how this is done?

html css

share|improve this question

asked Mar 22 at 8:13

PedroskiPedroski

1817

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Go to the lotto page, open the browser console and have a look at the button's css. You'll find some hints when you investigate the a-element and it's ::after-element.
  
  – Paflow
  Mar 22 at 8:18
  

  
  
  
  

add a comment | 

I have a simple web page for homework. It has rollover buttons for each week, they change colour on mouseover. Very old!

Now this is no kind of advertising, I have nothing to do with them, except, now and again I play lotto here. (Just to show the buttons.)

They had problems with the authorities in Spain and were offline a while. Now they are back with cool rollover buttons which flood fill.

My webpage is very simple, but I have rollover buttons lined up just like in the link.

Could anyone give me a pointer, link, tip as to how this is done?

html css

share|improve this question

asked Mar 22 at 8:13

PedroskiPedroski

1817

share|improve this question

asked Mar 22 at 8:13

PedroskiPedroski

1817

share|improve this question

asked Mar 22 at 8:13

PedroskiPedroski

1817

asked Mar 22 at 8:13

PedroskiPedroski

1817

asked Mar 22 at 8:13

PedroskiPedroski

1817

1 Answer
1

active

oldest

votes

1

You need to use an :after element and transition the height of it on :hover.

z-index will make sure your colour stays behind the content within the box.

I have created an example for you here:

li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20; /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10; /*this will keep your colour behind the content*/
 background-color: #bf1f1f;
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s; /*creates smooth animation*/


li:hover:after 
 height: 100%; /*toggling the height to 100% on hover of the box*/

<li><a href="/">Example List Item</a></li>

Here's an example with multiple items:

ul 
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;


li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20;
 /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10;
 /*this will keep your colour behind the content*/
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s;
 /*creates smooth animation*/


li:hover:after 
 height: 100%;
 /*toggling the height to 100% on hover of the box*/


li:nth-child(1):after 
 background-color: #c50202;


li:nth-child(2):after 
 background-color: #4444de;


li:nth-child(3):after 
 background-color: #279027;


li:nth-child(4):after 
 background-color: #e07832;


li:nth-child(5):after 
 background-color: #c50202;


li:nth-child(6):after 
 background-color: #4444de;


li:nth-child(7):after 
 background-color: #279027;

<ul>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
</ul>

share|improve this answer

edited Mar 22 at 10:54

answered Mar 22 at 10:25

coopscoops

1,214720

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Fantastic! Thanks! Just 1 small thing: my buttons now do not line up across the page, but on top of each other. My old mystyle.css has: li style="display:inline;" vertical-align: middle; float: left; margin:0px How to tweak your code to make them line up horizontally?
  
  – Pedroski
  Mar 22 at 23:31
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I set: li { display: inline-table; That fixed it! Thanks again!
  
  – Pedroski
  Mar 23 at 0:07
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55295393%2fhow-to-make-flood-fill-rollover-buttons%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You need to use an :after element and transition the height of it on :hover.

z-index will make sure your colour stays behind the content within the box.

I have created an example for you here:

li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20; /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10; /*this will keep your colour behind the content*/
 background-color: #bf1f1f;
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s; /*creates smooth animation*/


li:hover:after 
 height: 100%; /*toggling the height to 100% on hover of the box*/

<li><a href="/">Example List Item</a></li>

Here's an example with multiple items:

ul 
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;


li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20;
 /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10;
 /*this will keep your colour behind the content*/
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s;
 /*creates smooth animation*/


li:hover:after 
 height: 100%;
 /*toggling the height to 100% on hover of the box*/


li:nth-child(1):after 
 background-color: #c50202;


li:nth-child(2):after 
 background-color: #4444de;


li:nth-child(3):after 
 background-color: #279027;


li:nth-child(4):after 
 background-color: #e07832;


li:nth-child(5):after 
 background-color: #c50202;


li:nth-child(6):after 
 background-color: #4444de;


li:nth-child(7):after 
 background-color: #279027;

<ul>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
</ul>

share|improve this answer

edited Mar 22 at 10:54

answered Mar 22 at 10:25

coopscoops

1,214720

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Fantastic! Thanks! Just 1 small thing: my buttons now do not line up across the page, but on top of each other. My old mystyle.css has: li style="display:inline;" vertical-align: middle; float: left; margin:0px How to tweak your code to make them line up horizontally?
  
  – Pedroski
  Mar 22 at 23:31
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I set: li { display: inline-table; That fixed it! Thanks again!
  
  – Pedroski
  Mar 23 at 0:07
  

  
  
  
  

add a comment | 

1

You need to use an :after element and transition the height of it on :hover.

z-index will make sure your colour stays behind the content within the box.

I have created an example for you here:

li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20; /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10; /*this will keep your colour behind the content*/
 background-color: #bf1f1f;
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s; /*creates smooth animation*/


li:hover:after 
 height: 100%; /*toggling the height to 100% on hover of the box*/

<li><a href="/">Example List Item</a></li>

Here's an example with multiple items:

ul 
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;


li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20;
 /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10;
 /*this will keep your colour behind the content*/
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s;
 /*creates smooth animation*/


li:hover:after 
 height: 100%;
 /*toggling the height to 100% on hover of the box*/


li:nth-child(1):after 
 background-color: #c50202;


li:nth-child(2):after 
 background-color: #4444de;


li:nth-child(3):after 
 background-color: #279027;


li:nth-child(4):after 
 background-color: #e07832;


li:nth-child(5):after 
 background-color: #c50202;


li:nth-child(6):after 
 background-color: #4444de;


li:nth-child(7):after 
 background-color: #279027;

<ul>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
</ul>

share|improve this answer

edited Mar 22 at 10:54

answered Mar 22 at 10:25

coopscoops

1,214720

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Fantastic! Thanks! Just 1 small thing: my buttons now do not line up across the page, but on top of each other. My old mystyle.css has: li style="display:inline;" vertical-align: middle; float: left; margin:0px How to tweak your code to make them line up horizontally?
  
  – Pedroski
  Mar 22 at 23:31
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I set: li { display: inline-table; That fixed it! Thanks again!
  
  – Pedroski
  Mar 23 at 0:07
  

  
  
  
  

add a comment | 

You need to use an :after element and transition the height of it on :hover.

z-index will make sure your colour stays behind the content within the box.

I have created an example for you here:

li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20; /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10; /*this will keep your colour behind the content*/
 background-color: #bf1f1f;
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s; /*creates smooth animation*/


li:hover:after 
 height: 100%; /*toggling the height to 100% on hover of the box*/

<li><a href="/">Example List Item</a></li>

Here's an example with multiple items:

ul 
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;


li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20;
 /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10;
 /*this will keep your colour behind the content*/
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s;
 /*creates smooth animation*/


li:hover:after 
 height: 100%;
 /*toggling the height to 100% on hover of the box*/


li:nth-child(1):after 
 background-color: #c50202;


li:nth-child(2):after 
 background-color: #4444de;


li:nth-child(3):after 
 background-color: #279027;


li:nth-child(4):after 
 background-color: #e07832;


li:nth-child(5):after 
 background-color: #c50202;


li:nth-child(6):after 
 background-color: #4444de;


li:nth-child(7):after 
 background-color: #279027;

<ul>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
</ul>

share|improve this answer

edited Mar 22 at 10:54

answered Mar 22 at 10:25

coopscoops

1,214720

li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20; /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10; /*this will keep your colour behind the content*/
 background-color: #bf1f1f;
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s; /*creates smooth animation*/


li:hover:after 
 height: 100%; /*toggling the height to 100% on hover of the box*/

<li><a href="/">Example List Item</a></li>

ul 
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;


li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20;
 /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10;
 /*this will keep your colour behind the content*/
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s;
 /*creates smooth animation*/


li:hover:after 
 height: 100%;
 /*toggling the height to 100% on hover of the box*/


li:nth-child(1):after 
 background-color: #c50202;


li:nth-child(2):after 
 background-color: #4444de;


li:nth-child(3):after 
 background-color: #279027;


li:nth-child(4):after 
 background-color: #e07832;


li:nth-child(5):after 
 background-color: #c50202;


li:nth-child(6):after 
 background-color: #4444de;


li:nth-child(7):after 
 background-color: #279027;

<ul>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
</ul>

li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20; /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10; /*this will keep your colour behind the content*/
 background-color: #bf1f1f;
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s; /*creates smooth animation*/


li:hover:after 
 height: 100%; /*toggling the height to 100% on hover of the box*/

<li><a href="/">Example List Item</a></li>

li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20; /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10; /*this will keep your colour behind the content*/
 background-color: #bf1f1f;
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s; /*creates smooth animation*/


li:hover:after 
 height: 100%; /*toggling the height to 100% on hover of the box*/

<li><a href="/">Example List Item</a></li>

ul 
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;


li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20;
 /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10;
 /*this will keep your colour behind the content*/
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s;
 /*creates smooth animation*/


li:hover:after 
 height: 100%;
 /*toggling the height to 100% on hover of the box*/


li:nth-child(1):after 
 background-color: #c50202;


li:nth-child(2):after 
 background-color: #4444de;


li:nth-child(3):after 
 background-color: #279027;


li:nth-child(4):after 
 background-color: #e07832;


li:nth-child(5):after 
 background-color: #c50202;


li:nth-child(6):after 
 background-color: #4444de;


li:nth-child(7):after 
 background-color: #279027;

<ul>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
</ul>

ul 
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;


li 
 position: relative;
 border: 1px solid lightgrey;
 height: 100px;
 width: 100px;


li a 
 z-index: 20;
 /*this will keep your content above the colour*/
 position: relative;


li:after 
 z-index: 10;
 /*this will keep your colour behind the content*/
 display: block;
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 5px;
 width: 100%;
 transition: height .3s;
 /*creates smooth animation*/


li:hover:after 
 height: 100%;
 /*toggling the height to 100% on hover of the box*/


li:nth-child(1):after 
 background-color: #c50202;


li:nth-child(2):after 
 background-color: #4444de;


li:nth-child(3):after 
 background-color: #279027;


li:nth-child(4):after 
 background-color: #e07832;


li:nth-child(5):after 
 background-color: #c50202;


li:nth-child(6):after 
 background-color: #4444de;


li:nth-child(7):after 
 background-color: #279027;

<ul>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
 <li><a href="/">Example List Item</a></li>
</ul>

share|improve this answer

edited Mar 22 at 10:54

answered Mar 22 at 10:25

coopscoops

1,214720

answered Mar 22 at 10:25

coopscoops

1,214720

answered Mar 22 at 10:25

coopscoops

1,214720