Question

我有一个带有图像的按钮，但该按钮在图像的位置不可点击。只能在图片的外侧（图片名称）点击

下面是我的标签

.btn {
  border: 0px solid white;
  background: transparent;
  color: black;
  font-size: 12px;
  border-radius: 20px;
}

.default:hover {
  background: #e7e7e7;
}

<button type="button" name="search" class="btn default">
  <img src="https://placekitten.com/g/100/100" style="border-radius: 50%;" /> image name here
</button>

如何使该按钮在图像的位置上可点击？

Answer 1

它运行良好。

<button type="button" name="search" class="btn default" onclick=console.log("clicked")><img src="http://graph.facebook.com/00000000/picture" style="border-radius: 50%;"/>image name here</button>

Answer 2

只需将 pointer-events: none; 添加到 img 标签即可。

.btn {
  border: 0px solid white;
  background: transparent;
  color: black;
  font-size: 12px;
  border-radius: 20px;
}

.default:hover {
  background: #e7e7e7;
}

.btn img {
  pointer-events: none
}

<button type="button" name="search" class="btn default"><img src="http://graph.facebook.com/00000000/picture" style="border-radius: 50%;"/>image name here</button>

Answer 3

这按预期工作 - 但我稍微修改了您的代码以使其在语义上更正确。我将图像放在 figure 元素中，将名称放在 figcaption 元素中以提供更好的图像结构 - 然后按钮上的事件侦听器和控制台进行检查 - 一切都很好。

const button = document.querySelector('button');

button.addEventListener('click', clicked);

function clicked(){
 console.log('I was clicked');
}

.btn {
  border: 0px solid white;
  background: transparent;
  color: black;
  font-size: 12px;
  border-radius: 20px;
}

.btn img {
  border-radius: 50%;
}


.default:hover {
  background: #e7e7e7;
}

.btn:hover, 
.btn:focus {
  outline: none
}

<button type="button" name="search" class="btn default">
  <figure>
    <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="50"/>
    <figcaption>
      fluffy kitten
    </figcaption>
  </figure>
</button>

Answer 4

这可以通过三种方式完成

图像作为输入

 <input type="image" name="Name of image button" src="Path of the Image file? border="Specfiy Image Border " alt="text">

2.通过使用css样式

<button style="background: url(myimage.png)" ... />

3. 使用`onclick` javascript 函数

<button onclick="myFunction()"><img src="your image name here.png"></button>

Answer 5

使用 Onclick：

function clickedButton(){
  alert("I am clicked!");
}

.btn {
  border: 0px solid white;
  background: transparent;
  color: black;
  border-radius: 20px;
  width: 150px;
  height: 30px;
  cursor: pointer;
  outline: none;
  background: url("https://picsum.photos/150/30") no-repeat scroll 0 0 transparent;
}

.btn:active{
  border: 2px solid #111;
}

.default:hover {
  background: #e7e7e7;
}

<button onclick="clickedButton()" type = "button" name = "search" class = "btn default" > <img src="">image name here </button>https://stackoverflow.com/posts/67031752/edit#

使用添加监听器

document.getElementById("button").addEventListener("click", clickedButton);

function clickedButton() {
  alert("I as clicked!");
}

.btn {
  border: 0px solid white;
  background: transparent;
  color: black;
  border-radius: 20px;
  width: 150px;
  height: 30px;
  cursor: pointer;
  outline: none;
  background: url("https://picsum.photos/150/30") no-repeat scroll 0 0 transparent;
}

.btn:active {
  border: 2px solid #111;
}

.default:hover {
  background: #e7e7e7;
}

<button id="button" type="button" name="search" class="btn default"> <img src="">image name here </button>

通过点击添加

.btn {
  border: 0px solid white;
  background: transparent;
  color: black;
  border-radius: 20px;
  width: 150px;
  height: 30px;
  cursor: pointer;
  outline: none;
  background: url("https://picsum.photos/150/30") no-repeat scroll 0 0 transparent;
}

.btn:active{
  border: 2px solid #111;
}

.default:hover {
  background: #e7e7e7;
}

<button type = "button" name = "search" class = "btn default" > <img src="">image name here </button>

这样的事情应该会有所帮助！

我怎样才能让按钮在图片的位置上可以点击？

5 个答案: