Question

每当我将鼠标悬停在我的盒子上时，它应该模糊img，将img的亮度调低60％，然后会出现一些文字。但是，无论何时，只要我将鼠标悬停在文本上，模糊就会消失，文本会保留在框中，直到我将其悬停在文本框中。我想知道如何解决这个问题，以便一切都可以同时作出反应？

html代码： `

import java.io.File;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

import org.apache.commons.io.FileUtils;

public class CompareFile {

    String directory;
    File file;

    public CompareFile(String directory, File file) {
        this.directory = directory;
        this.file = file;
    }



    public boolean doesFileExist() {

        boolean indicatorFileExist = true;
        List<File> files = null;

        try {
            files = getFiles();
            files = files.stream().filter(fileMatch -> {
                try {
                    if(fileMatch.isFile()){
                        return FileUtils.contentEquals(fileMatch, file);
                    }else{
                        return false;
                    }

                } catch (Exception excep) {
                    excep.printStackTrace();
                    return false;
                }
            }).collect(Collectors.toList());

            if(files.isEmpty()){
                indicatorFileExist = false;
            }

        } catch (Exception excep) {
            excep.printStackTrace();
        } finally {
            if (files != null) {
                files = null;
            }
        }

        return indicatorFileExist;

    }

    private List<File> getFiles() {

        List<File> fileList = null;

        try {

            if(directory!=null && directory.trim().length()>0 && file!=null){

                File dir = new File(directory);
                if(dir.isDirectory() && dir.exists() && dir.canRead()){
                    fileList = Arrays.asList(dir.listFiles());
                }


            }

        } catch (Exception excep) {
            excep.printStackTrace();
        }
        return fileList;
    }


}

`

CSS代码：

<section class="container">
  <div class="row">
    <figure class="col-sm-6">
      <img src="edge.jpg">
      <h2>COBAN Technologies</h2>
      <h4>Quality Control Specialist</h4>
</section>

Answer 1

将悬停线更改为

section .col-sm-6:hover img {
  filter: blur(2px) brightness(60%);
}

如果您将包含文本和图像的整个元素悬停，而不是仅悬停<img>时，则应用该样式。

＆＃13;

    /*work panels*/

section .col-sm-6 img {
  margin: 0 0 30px 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

section .col-sm-6:hover img {
  filter: blur(2px) brightness(60%);
}

section .col-sm-6 :not(img) {
  position: absolute;
  top: 30%;
  z-index: 1;
  color: #ffffff;
  width: 100%;
  text-align: center;
  letter-spacing: 0.2rem;
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

section .col-sm-6:hover :not(img) {
  opacity: 1;
}

section .col-sm-6 h4 {
  top: 50%;
}

＆＃13;

<section class="container">
  <div class="row">
    <figure class="col-sm-6">
      <img src="https://lastfm-img2.akamaized.net/i/u/avatar300s/a96ecf5e524449ec866a6674709bb212.jpg">
      <h2>COBAN Technologies</h2>
      <h4>Quality Control Specialist</h4>
    </figure>
  </div>
</section>

＆＃13;

使用CSS3进行文字悬停模糊？

1 个答案: