Question

我想要一种更简单/有效的方式来编辑<img class "search-button>的鼠标悬停在<button class="search-button">上而不是像我在下面所做的那样更改search-button本身。

img正在改变身高并且按钮不是这样的事实对我来说也很奇怪。我认为更改height属性会更改按钮的height，而不会更改height的{{1}}

是否可以不使用Javascipt和纯CSS方法？由于我正在自学，因此更多的信息远非仅仅是一种解决方案，因此我将不胜感激。

修复和编辑后 - 我的问题：它可以更简单吗？

HTML

img

CSS

<button type="submit" class="search-button">
    <img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>

原文：http://jsfiddle.net/x8xwxg3z/

更新（运作良好）：http://jsfiddle.net/x8xwxg3z/5/

*随机放大镜图片例如

Answer 1

所以如果我理解你的话，你只想让图像变大，而不是按钮？

您可以尝试以下方法：

.search-button:hover .search-button-img {
    height: 90%;
}

而不是：

.search-button :hover {
  margin-top:-1px;
  margin-left:-1px;
  height:100%;
}

这不会起作用，因为你在类/选择器和伪类之间使用了一个空格。在CSS中，只要您使用空格就编写selector:pseudoclass，CSS会将其解释为孩子。因此，.foo .bar会使用bar中的<div class="foo"><div class="bar">Baz</div></div>课来解析div。 CSS选择器可以是ID，类或简单的选择器。课程由前面的.和#的ID来处理。我希望这会有所帮助。

使用CSS，您可以添加像图像一样的子元素。它是Javascript，你的意思不是Java;）

Answer 2

你的问题来自于：hover和你的类之间的空间，所以删除空格

.search-button:hover {
  margin-top:-1px;
  margin-left:-1px;
  height:100%;
}

Answer 3

试试这个：http://jsfiddle.net/x8xwxg3z/3/

和css代码在这里：

.search-button {
  padding:0px;
  margin:0px;
  width:105px;
  height:105px;
  border-radius: 5px;
  background-color:transparent;
  overflow:hidden;
    position:relative; transition:all 0.5s ease-in 0s;
}

.search-button-img {
  height:50px;
    position:absolute; top:10px; left:20px
}

.search-button:hover {
  margin-top:-1px;
  margin-left:-1px;
  height:500px;
      width:80%;

}

Answer 4

我认为你想要的是在不增大图像的情况下使按钮变大。图像越来越大，因为它的大小是％（这取决于他的父母，在这种情况下，是按钮）。

反正：

.search-button:hover{}指的是：当您将鼠标悬停在按钮上时，请按此按钮。

.search-button:hover .search-button-img{}指的是：当您将鼠标悬停在按钮上时，请执行此操作。

然后你只需要你想做的改变。

将鼠标悬停在“<按钮>上”时更改<img/>的CSS。 <img/>位于</button> <button> </button>内

4 个答案: