Jump to content

:hover and opacity question


Mouse51180

Recommended Posts

Im starting to learn CSS and I have the following code that make a in img background, alternated colors in a table and then has a mouseover change of colors.<style type="text/css">

th {
	background-color: #00F;
	color:#FFF;
	font-size: large;
	font-weight: bolder;
	font-family: Georgia, "Times New Roman", Times, serif;
	
}
tr:nth-child(even) {background-color: #6FF; opacity: .8;}
tr:nth-child(odd) {background-color: #FFF; opacity: .8;}
tr {text-align: center;}
body {background-image: url(DiveFlagBackground.jpg);}
tr:hover{background-color:#000; color:#00FF00};
</style>

I have started to realize that depending where each line of code is will determine how everything run...for instance if I move my background-image line to the the top of the script...it disappears from the screen...im still working on understanding this, but that is nor here nor there right now.

My issue is this...when I test this page in Chrome, everything looks how I want it.  The table header section doesnt change any color, on mouseover only the table row with the table data changes color, and you can slightly see the image in the background through the table.
When I test this in IE11 the opacity setting looks like it is being ignored and complete covers the whole background image.  Also when I do the mouse over everything looks good except when I mouseover the table header section it changes to a slightly darker blue.  

It there an exclude or an "if row = th" or "if row = 0 color change = NULL" type of statement I need to put in?

Not sure what to do about the opacity setting as I thought this code would work for anything past IE8.

If you would like to see the issue my page is http://mouse.myds.me/Test1.php

 

Thanks for any advise\help.

Link to comment
Share on other sites

You have have not closed the opening table tag. There should be a > after cellspacing="2"

 

Your HTML is not a complete document you have left of the DOCTYPE, <html>, <head></head> tags. Basic HTML structure should look like

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
  
    ... link to styesheets / javascript / other external resourse here ...
</head>
<body>

... html for page here ...

</body>
</html>

 

 

When I test this in IE11 the opacity setting looks like it is being ignored and complete covers the whole background image

Try using  filter. IE is not always known for treating CSS properties the same as other browsers.

 

 

 

It there an exclude or an "if row = th" or "if row = 0 color change = NULL" type of statement I need to put in?

Make your selector be more specific  tr:hover  will affect any HTML element contained within the table row. However   tr:hover td   will only affect the <td> tags within the table row.

 

 

 

.for instance if I move my background-image line to the the top of the script

Moving the body selector to the top should not affect anything. Just make sure you have not placed it within another selector! Or caused syntax error in your css elsewhere.

Link to comment
Share on other sites

Thank you for the help...I have gotten some of this working now.

 

 

Quote

 

 

It there an exclude or an "if row = th" or "if row = 0 color change = NULL" type of statement I need to put in?

Make your selector be more specific  tr:hover  will affect any HTML element contained within the table row. However   tr:hover td   will only affect the <td> tags within the table row.

The tr:hover td worked to resolve the title changing color...I thought I had tried that once before, but perhaps I fat fingered the code.
 

I have also added the missing <STUFF> from my page.  Im using Dreamweaver and it did not add all this by default since I chose to start this as a php page...everything was working fine...so I didnt think it was necessary.
 

 

Quote

 

 

When I test this in IE11 the opacity setting looks like it is being ignored and complete covers the whole background image

Try using  filter. IE is not always known for treating CSS properties the same as other browsers.

Im not getting the the opacity to work still.  I have tried playing with the filter option, but I cant seem to get it to work.  

I have replaced the opacity in code mentioned in the initial post

tr:nth-child(even) {background-color: #6FF; target: opacity(80%);} 

I have tried adding it in addition to the current opacity code

tr:nth-child(even) {background-color: #6FF; opacity: .8; filter: opacity(80%);} 

I have tried moving it around the code

tr:nth-child(even) {background-color: #6FF; opacity: .8;}
tr:nth-child(odd) {background-color: #FFF; opacity: .8;}
filter: opacity(80%); 
tr:nth-child(even) {background-color: #6FF; opacity: .8;}
tr:nth-child(odd) {background-color: #FFF; opacity: .8;}
tr {filter: opacity(80%);}
 

...just cant make any headway with it.

Here is my current code for the whole page:

<!DOCTYPE html>
<html>
<head>
<?php
include_once("divelog_connect.php");
$sql = "SELECT * FROM DL_Logbook ORDER BY Number DESC LIMIT 0,20";
$records = mysqli_query($sql_connect,$sql);
?>
<style type="text/css">
th {
	background-color: #00F;
	color:#FFF;
	font-size: large;
	font-weight: bolder;
	font-family: Georgia, "Times New Roman", Times, serif;
}
tr:nth-child(even) {background-color: #6FF; opacity: .8;}
tr:nth-child(odd) {background-color: #FFF; opacity: .8;}
tr:hover td{background-color:#000; color:#00FF00;}
body {background-image: url(DiveFlagBackground.jpg);}
tr {text-align: center};
</style>
</head>

<body>
<br />
<br />
<br />
<br />
<table align="center" border="5" cellpadding="5" cellspacing="2"
<col width="auto">
<tr>
<th>#</th>
<th>Dive Date</th>
<th>Dive Time</th>
<th>Max Depth <br /> (Feet/Meters)</th>
<th>Dive Site Name</th>
<th>Location</th>
</tr>
<?php
//Pull data for table:
While($DL_Logbook = mysqli_fetch_assoc($records)){
	echo "<tr>";
	echo "<td>".$DL_Logbook['Number']."</td>";
	echo "<td>".$DL_Logbook['Divedate']."</td>";
	echo "<td>".$DL_Logbook['Divetime'].' min'."</td>";
	$meters = round($DL_Logbook['Depth'],1);
	$feet = round(($meters * 3.2808),1);
	echo "<td>" . $feet . ' ft / ' . $meters. ' m' . "</td>";
	echo "<td>".$DL_Logbook['Place']."</td>";
	echo "<td>".$DL_Logbook['City']."</td>";
	echo "</tr>";
}//end while
?>
</table>
</body>
</html>

Where or how should this filter option be added?

 

One other item I just noticed was in Chrome my table has a 3d looking frame...in IE it has a solid black bar frame...im curious if I should probably create the table in the css section instead of the html body section...  what is recommended or suggested or is it not going to make a difference either way IE just doesnt want to run the code like the other browsers?
 

Link to comment
Share on other sites

Um... weird IE does not like the background color being applied to the table row along with opacity. I experimented by adding td after the tr:nth-child() selector and this seemed to fixed the opacity issue.  :shrug: .

 

CSS

body {
	background-image: url(DiveFlagBackground.jpg);
}
th {
	background-color: #00F;
	color:#FFF;
	font-size: large;
	font-weight: bolder;
	font-family: Georgia, "Times New Roman", Times, serif;
	
}
tr:nth-child(even) td {background-color: #6FF; }
tr:nth-child(odd) td {background-color: #FFF;}
tr {text-align: center; opacity: .8;}
tr:hover td {background-color:#000; color:#00FF00};

I have only tested on IE11 (no idea about earlier versions)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.