Question

我附上2张图片，1张是简单的，其他图片是悬停。我需要像第二张图片一样悬停橙色边框。任何1知道如何通过css进行这种类型的悬停

下面的Ny代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<WebView
    android:id="@+id/frag1_web"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

    <TextView
        android:id="@+id/errorText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:visibility="gone"
        android:text="Problem Loading Page"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

</RelativeLayout>

Answer 1

以下是工作示例，请注意.hover与[{1}}勾选但console.log事件仅在您将鼠标悬停在图片上时触发。

＆＃13;

mouseover

＆＃13;

// Jquery
$('.img-1').hover(function() {
    // do stuff
    console.log($(this).attr('src'));
});

// pure javascript

var img = document.querySelector('.img-1');

img.addEventListener('mouseover', function() {
  // do stuff
  
  //console.log('do stuff');
});

＆＃13;

Answer 2

试试这个。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 50%;
}

.image {
  content:url("assets/images/img-1.png");
  opacity: 0.8;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.container:hover .image {  
  content:url("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
  opacity:2;
}  

</style>
</head>
<body>

<div class="container">
  <img class="image">
  <p>Lorem ipsum dummy text</p>
</div>

</body>
</html>

如何为html中使用的图像赋予悬停效果？

2 个答案: