CSS3 では、1 つの要素に複数の背景画像を設定できることをご存知ですか?
background-image: url(image.png) , url(image1.png);
「ホバー」イベントで、現在の画像 URL を置き換えることなく、別の画像 URL を追加する必要があります。
私はもう試した:
element:hover
{
background-image: url(image1.png);
}
運がない。
ただし、ホバーイベントですべての画像を再割り当てするだけで、すべてうまくいきます:
element:hover
{
background-image: url(image.png) , url(image1.png);
}
id
しかし、ID ごとに異なるプライマリ イメージを割り当てるために を使用しているため、それはできません。だから、このようなもの:
.buttonClass
{
/*width and height stuff here*/
}
.buttonClass:hover
{
/*this is where I add my ADDITIONAL image*/
}
#buttonONE
{
/*this is where I assign my primary image*/
}
#buttonTWO
{
/*this is where I assign my primary image from buttonTWO
which is different from the image assigned to buttonONE*/
}
SO にはid
ID ごとに異なるため、プライマリ イメージが含まれます。だから私はただ行うことができます:
#buttonOne:hover
{
/*but, the hover image (the additional image) I want to append will
not differ at all. It will always be the same.*/
background-image: url(image.png) , url(image1.png);
}
#buttonTwo:hover
{
/*so this method is pretty messy and pointless,
unless of course, it's the only way?*/
background-image: url(imagedsfsdf.png) , url(image1.png);
}
だから、クラスのホバーに追加するだけで不要なホバーをあちこちに投げつけたくありませんよね?
それで、何かアイデアはありますか?
ああ、もう1つ-JSとjQueryを除外したいと思います。他に方法がなければ...