- PR -

onmouseoverの仕様について

1
投稿者投稿内容
noteZ
会議室デビュー日: 2006/07/22
投稿数: 9
投稿日時: 2007-08-01 08:45
どちらかというとHTMLの仕様についてかもしれませんが、
onmouseoverでテーブルの背景色変更ができなくなってしまったので
相談させて下さい

社内標準で読み込みが必須のCSS内の背景設定から抜粋
----
*{background-color:white;}
----


作成したHTMLを要約
----
<html>
<head>
<style>td{background-color:transparent;}</style>
</head>
<body>
<table sytle="background-color:pink;">
<tr sytle="background-color:blue;"
onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='blue'">
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr sytle="background-color:blue;"
onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='blue'">
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
<tr sytle="background-color:blue;"
onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='blue'">
<td>ggg</td><td>hhh</td><td>iii</td>
</tr>
</table>
</body>
</html>
----

上記のようにして、マウスのある行のセルの色をredにしたいのですが、
マウスを合わせてても色はかわらないどころか
trで指定した背景色のredやblueは反映されず、
tableの背景色であるpinkになってしまいます。
tdは、透明であるはずのtransparentにしているので、trの色に
透けてみえると思ったのですが、tr自体も透けてしまいます。
なにか良い方法はありますでしょうか？
あすか
ぬし
会議室デビュー日: 2006/07/12
投稿数: 309
投稿日時: 2007-08-01 09:30
<style type="text/css2">td{background-color:transparent;}</style>

何がどう変更されたかわかりますでしょうか。
そこが大切なポイントです

[ メッセージ編集済み 編集者: あすか 編集日時 2007-08-01 09:31 ]
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2007-08-01 09:38
ここも変です。

>sytle=
noteZ
会議室デビュー日: 2006/07/22
投稿数: 9
投稿日時: 2007-08-02 08:44
あすか様、mio様 回答ありがとうございました
昨日色々試行してみました結果以下のようになりました。

<style type="text/css2">
を使用したら、たしかに、tdが透けてtrの色が見えるようになったのですが
インポートしているcss自体を無視しているようで、社内標準のCSSに記述
されているマージン設定や文字サイズ等のレイアウトが無視されるように
なってしまいましたインポートのしかたは
@import url(http://〜〜〜/css/common.css);
でも
@import "http://〜〜〜/css/common.css";
でも
<link rel=stylesheet type="text/css2" href="http://〜〜〜/css/common.css">
でもだめでした

<link rel=stylesheet type="text/css" href="http://〜〜〜/css/common.css">
だとレイアウトは反映されますが、
<style type="text/css2">の中身が無視されてしまいます
共存は無理なのでしょうか？

だとしたら、各行毎のtdにidかclassを割り振ってonmouseover時に
getElementsClassName("？行目").style.backgroundColor="色名"とかを
実行させるしかないのでしょうか？
それはそれで、更新作業と動作が重くなりそうですが・・・

------

>sytle=
は、コピペせずに手入力による投稿時のミスです
m(__)m
あすか
ぬし
会議室デビュー日: 2006/07/12
投稿数: 309
投稿日時: 2007-08-02 09:00
@importの使い方が悪いのかもしれません。
@importは一番最初、もしくは@charasetの直後に書く決まりになっています。

共存は理論上不可能ではないはずですし
あとはブラウザがきちんと解釈してくれていない
という可能性もあります。
1

スキルアップ／キャリアアップ（JOB@IT）