php - How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

Question

Welcome To Ask or Share your Answers For Others

php - How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

php - How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

Someone made this piece of code for me and I think there's some unnecessary bits in it.

This is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 
xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 
/> <title>IS THIS THING ON?</title> <link rel="stylesheet" 
href="./wp-content/themes/cosmicbuddy/_inc/css/screen.css" 
type="text/css" />
</style>
</head> <body>
<a href="<?php bp_send_public_message_link() ?>" class="myButton"><!-- 
button --></a>
</body> </html>

And this is the CSS file it refers too:

   .myButton {
    background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
    border: 1;
    cursor: pointer;
    display: block;
    height: 22px;
    width: 22px;
    margin-left: 5px;
    } .myButton:hover {
    background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
    }

Now I have two questions:

Can the first piece of code shortened?
How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:

#userbar #bp-nav li.current a{
   color:#000;
   font-weight:bold;
}
   #userbar #bp-nav li a:hover {
   color: #3193c7; text-decoration: none; 
}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:33:56+0000

1 Can the first piece of code shortened?

If you are so concerned about the size than remove the  html comment.

./wp-content/themes/cosmicbuddy/_inc/css/screen.css

is equivelent to:

wp-content/themes/cosmicbuddy/_inc/css/screen.css

Saving 2 characters :)

As it seems to me in the CSS file you can shorten the path to the images. Instead:

background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
...
background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;

use relative URLs:

background: url(../images/see.gif) no-repeat;
...
background: url(../images/too.gif) no-repeat;

2 How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:

If you don't want to add the CSS class to every element you have to wrap them in some other element

...
</head> <body>
<div class="buttons">
<a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
</div>
</body> </html>

And the CSS

.buttons a {
    background: url(../images/see.gif) no-repeat;
    border: 1;
    cursor: pointer;
    display: block;
    height: 22px;
    width: 22px;
    margin-left: 5px;
} 
.buttons a:hover {
    background: url(../images/too.gif) no-repeat;
}

The cursor is usually used if the href attribute is not set.

Categories

php - How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

php - How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags