4 Replies - 970 Views - Last Post: 22 May 2016 - 04:44 AM

#1 nilanila   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 28-September 14

Table cell change background color on hover?

Posted 20 May 2016 - 12:57 PM

I'm doing a calendar with events, and I would like to do a hover effect where the table cell changes background. As I have it now, only the number changes background. I've tried a lot of combinations and hover on different elements, but I can't get it to work. Any tips?

<div id="calendar" >
						<table>
							<thead>
								<tr>
									<td class="hover"><a href="" class="arrow">&lt;</a></td>
									<td colspan="5">Maj</td>
									<td class="hover"><a href="" class="arrow">&gt;</a></td>	
								</tr>
							</thead>
							<tbody>
								<tr>
									<th>må</th>
									<th>ti</th>
									<th>on</th>
									<th>to</th>
									<th>fr</th>
									<th>lö</th>
									<th>sö</th>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td>1</td>
								</tr>
								<tr>
									<td>2</td>
									<td>3</td>
									<td>4</td>
									<td>5</td>
									<td>6</td>
									<td>7</td>
									<td>8</td>
								</tr>
								<tr>
									<td>9</td>
									<td>10</td>
									<td>11</td>
									<td>12</td>
									<td>13</td>
									<td>14</td>
									<td>15</td>
								</tr>
								<tr>
									<td>16</td>
									<td><a href="">17</a></td>
									<td><a href="">18</a></td>
									<td><a href="">19</a></td>
									<td><a href="">20</a></td>
									<td>21</td>
									<td>22</td>
								</tr>
								<tr>
									<td><a href="">23</a></td>
									<td>24</td>
									<td><a href="">25</a></td>
									<td>26</td>
									<td>27</td>
									<td>28</td>
									<td>29</td>
								</tr>
								<tr>
									<td><a href="">30</a></td>
									<td>31</td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</tbody>
						</table>
				</div><!--/#calendar-->


table {
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}

table, th, td {
    border: 0.1em solid #dbdbdb;
}

th {
	background-color: #f4f4f4;
}

td a:hover {
	background-color: yellow;
}

td .hover:hover {
  background-color: green;
}

.arrow {
	text-decoration: none;
}



https://jsfiddle.net/gcyq9dk9/1/

Is This A Good Question/Topic? 0
  • +

Replies To: Table cell change background color on hover?

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Table cell change background color on hover?

Posted 20 May 2016 - 02:06 PM

Should be as simple as:
td:hover {
    background-color: green;
}


Was This Post Helpful? 0
  • +
  • -

#3 nilanila   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 28-September 14

Re: Table cell change background color on hover?

Posted 21 May 2016 - 02:07 AM

View PostAtli, on 20 May 2016 - 02:06 PM, said:

Should be as simple as:
td:hover {
    background-color: green;
}




Then all the td change color on hover. I would like just the ones with a link to change.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6554
  • View blog
  • Posts: 26,569
  • Joined: 12-December 12

Re: Table cell change background color on hover?

Posted 21 May 2016 - 04:24 AM

You cannot target "td's that contain an a-link, apply a hover affect to the parent td". There must be some rule which adds an a-link to particular cells? This rule could be used to also add a class-name to the containing td, then you could write CSS to target this class.

However, from your description and example, it appears that you can achieve what you want by making the a-link fill the whole cell, then CSS-hover effect could target the a-link within the td:
td a {
    display: block;
}
td:hover a {
	background-color: yellow;
}


(Of course, if you are not actually linking to anything, then you could remove the a-tags and just target the td's having applied a class-name to them.)
Was This Post Helpful? 1
  • +
  • -

#5 nilanila   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 28-September 14

Re: Table cell change background color on hover?

Posted 22 May 2016 - 04:44 AM

Works fine. Thanks a lot! :)/>

This post has been edited by andrewsw: 22 May 2016 - 05:55 AM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1