Question

我已经设计了按钮在外部应用程序中的外观，并将其另存为用于网页的图像，并且我希望对网页进行编码，以便将鼠标悬停在按钮上时，图像变为我设计的按钮-是否可以使用html.css做到这一点？

当前的html代码：

public class PaintView extends android.app.Activity{

    LayoutParams params;
    Path path = new Path();
    Paint br = new Paint();
    Bitmap background;
    Bitmap background2;


  public PaintView(Context context) {


      super();

        int maxHeight = 2000;
        int maxWidth = 1000;

       float scale = Math.min(((float) maxHeight / background.getWidth()), ((float) maxWidth / background.getHeight()));

        Matrix matrix = new Matrix();
        matrix.postScale(scale, scale);

        background = Bitmap.createBitmap(background, 0, 0, background.getWidth(), background.getHeight(), matrix, true);
        background2 = Bitmap.createBitmap(background2, 0, 0, background2.getWidth(), background2.getHeight(), matrix, true);



        br.setColor(Color.GREEN);
        br.setStyle(Paint.Style.STROKE);
        br.setStrokeJoin(Paint.Join.ROUND);
        br.setStrokeWidth(10f);

        params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

    }

    private float getHeight() {
     int height = 5;
     return height;
    }

    private float getWidth() {
      int width = 5;
      return width;
    }


    //@Override
    public void onClick(View view) {
    Log.i("Hello", "Hello you!");
    }
}

css代码：

    <div class = 'comment'>
        <a href = "hidden_comments.html">
        <img src='commentbar.jpg', width=90px>
    </div>

Answer 1

是可能的。将：hover作为CSS中元素的选择器。并添加css的背景图片部分，例如：

div:hover{
  background-image: url("paper.gif");
}

Answer 2

不建议使用CSS悬停。您可能需要动态更改图像，而CSS无法做到这一点。

Here，您可以找到确切的解决方案

Answer 3

如果要使用img。您总是可以同时拥有两者，然后隐藏其中一个并显示另一个。

<div class='comment'>
    <img class="image1" src='commentbar.jpg', width=90px>
    <img class="image2" src='commentbar2.jpg', width=90px>
</div>

.comment .image2 { display:none; }
.comment:hover .image1 { display: none; }
.comment:hover .image2 { display: inline; }

是否可以使用：hover更改图像？

3 个答案: