HTML CSS按钮的相关问题

Posted 2023-04-20

这样的
图中是我想要实现的效果
按钮的长度根据字的数量来自动适应。HOVER 的背景效果需要是橘色。
有二级子目录的按钮中 HOVER的效果 背景变成橘黄色 蓝色箭头需要变成白色

请教一下高手。我这样是要如何实现（如何切图和写CSS）

自动适应的圆角背景：
默认的背景：切两个图，分别是左边圆角 和 右边圆角。
鼠标移动上去的背景：切两个图，分别是左边圆角 和 右边圆角。

小三角：蓝色三家、白色三角

html代码：

<ul>
<li><a href="#"><span>项目菜单</span></a></li>
<li><a href="#"><span>项目菜单</span></a></li>
<li><a href="#"><span>项目菜单</span></a></li>
<li><a href="#"><span>项目菜单</span><em class="icon'></em></a></li>
<li><a href="#"><span>项目菜单</span><em class="icon'></em></a></li>

</ul>

样式：
ul li ：float:left
ul li a ：默认灰色左边圆角背景 display:block;
ul li a span ：默认灰色右边圆角背景 默认灰色中间背景颜色 float:left
ul li a em ：默认蓝色小三角 float:right

ul li a:hover ：橘色左边圆角背景 display:block;
ul li a:hover span ：橘色右边圆角背景 橘色中间背景颜色 float:left
ul li a:hover em ：白色小三角 float:right 参考技术A 圆角

圆角部分用 css3
如果非要在ie8 以下实现圆角
你需要把,按钮分成三部分,
<div class="btn"><span class="left"></span><span class="mid"></span><span class="right"></span></div>
然后准备 左右二个半圆.
三角
三角图 若干.
从上到下依次覆盖.
无三角
蓝三角
橘三角追问

圆角的鼠标滑过状态呢？

三角的那个覆盖什么意思？

参考技术B 安装火狐及firbug查看他的样式和图片就行了追问

我自己做的效果图。

图像按钮在 HTML5/CSS3 中不可点击

【中文标题】图像按钮在 HTML5/CSS3 中不可点击

【英文标题】：Image button not clickable in HTML5/CSS3

【发布时间】：2019-09-01 01:20:26

【问题描述】：

在我的网站上获取可点击图片时遇到问题。我所有带有链接的标准按钮都可以正常工作。下面我将粘贴与相关按钮相关的 CSS 和 HTML5 代码。出于明显的原因，我省略了实际链接。

.button3 
  background-image: url("donate.png");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-left: 500px;
  margin-right: 5px;
  margin-top: 40px;

<div class="button3">
  <a href="link" class="button3"></a>
</div>

【问题讨论】：

是不是因为找不到图片，而你在找不到锚点的时候没有任何内容，所以没有什么可点击的？

@chennighan 图像根据需要正确显示，鼠标正确悬停，但点击时没有任何反应。

【参考方案1】：

你可以这样做。 （用 s/o 替换您的图像）。使用您当前的样式，我将display: inline-block 添加到锚。

.button3 
  background-image: url("https://cdn.sstatic.net/Sites/***/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-left: 500px;
  margin-right: 5px;
  margin-top: 40px;

<a href="link" class="button3"></a>

Working JSFiddle

【讨论】：

好的，现在我离我的解决方案更近了，除了有点困惑。这里的区别似乎是显示属性。如果我复制粘贴您的代码并替换我的链接和我的图片网址，我的图片将不再显示。如果我粘贴您的代码并在我的 css 样式表上有 2 个 .button3，我的两个图像都会显示并且一个正在工作且可点击，另一个正在显示但不可点击。我的样式表上的两个 .button3 都是相同的，但是如果我的样式表上只有一个，我的按钮图像将不会显示...

根据我们从您的 sn-p 中看到的情况，我们无法知道其他样式正在影响它。我们只是在使用您给我们的东西。

【参考方案2】：

您可以改为将 div 按钮包裹在锚标签中，这样您的锚标签将拉伸到其内容的宽度和高度，从而使您的整个 div 可点击。

请看下面的例子：

.button3 
  background-image: url("https://cdn.sstatic.net/Sites/***/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 150px;
  /*margin-left:500px;
  margin-right:5px;*/
  margin-top: 40px;

<a href="link">
  <div class="button3">
  </div>
</a>

【讨论】：

根据他的实现，最好使用输入developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

@nick parsons 将锚标签包裹在 div 类周围产生了相同的结果。图像正确悬停，好像单击它会将我带到一个链接，但单击时没有响应。

@Cale 上面的 sn-p 对你有用吗？如果它在您的代码中起作用但不起作用，那么您网站的其他部分肯定存在另一个问题，导致此