我已经设法使用 CSS 构建了一个工作。
为按钮图标制作了自定义图像。
这是视图/布局页面中的内容:
<ul class="menu">
<li>
<div id="button_name"><?php
echo $this->Html->image("name_of_img.png", array(
"alt" => "Animal Health",
'url' => array('controller' => 'controllerName', 'action' => 'index')));
?>
<?php echo $this->Html->link(__('Link Text'), array('controller' => 'controllerName', 'action' => 'index')); ?>
</div>
</li>
</ul>
如果你不使用 cakePHP,你可以在普通的 HTML 页面中这样做:
<ul class="menu">
<li>
<div id="button_name"><a href="/path/to/page.html"><img src="/path/to/img/imagename.png" alt="Animal Health" /></a><a href="/path/to/page.html">Animal Health</a>
</div>
</li>
<ul>
这使得文本和图标都可以点击。
然后是CSS:
.menu li {padding:0px; border: 0px; margin: 0px; list-style: none;
float: left; margin-left: 0px; display: block; height: 36px;} //remove any stlying and set up for the menu.
#button_name{background-color: darkorange;
float: left;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 0px;
padding: 1px 3px 1px 3px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
border: 1px black;
text-align: right;
color: #6495ED;
font-weight: bold;
-webkit-transition: all 1000ms;
-moz-transition: all 1000ms;
-o-transition: all 1000ms;
-ms-transition: all 1000ms;
transition: all 1000ms;}
#button_name a {
-webkit-transition: all 1000ms;
-moz-transition: all 1000ms;
-o-transition: all 1000ms;
-ms-transition: all 1000ms;
transition: all 1000ms;
font-weight: bold;
color: #6495ED;
}
#button_name:hover
{background-color: #6495ED;}
#button_name:hover a // VERY IMPORTANT see note
{
font-weight: bold;
color: darkorange;}
这是一个带有 2 个圆角顶角的漂亮按钮。当您将鼠标悬停在按钮上时,背景和文本颜色会相互转换。即:文本从蓝色变为橙色,背景从橙色变为蓝色。
关于#button_name:hover a 的注意事项:如果将其设置为“button_name a:hover”,则必须按指定设置它,文本将保持与背景相同的颜色。
希望这会对其他人有所帮助。
仍然渴望听到有关使用 JS 进行此操作的任何想法。