Question

这是我的代码：

const csv = require('fast-csv');
const fs = require('fs');

console.log("hello world")
console.log("list of order prices", process.argv[2]);
let required_products=[]
for(var i=3;i<process.argv.length;){
   let temp=[]
   temp.name=process.argv[i++]
   temp.quantity=process.argv[i++]
   required_products.push(temp)
}
/*
    To read csv file and print the data to the console:
    [node orderPrice --list input/sample.catalog.csv]
*/

let stream = fs.createReadStream(process.argv[2]);

var total = 0;
var csvStream = csv()
    .on("data", function(data){
         let product_name = data[0];
         let quantity = data[1];
         let price = data[2];

         required_products.forEach(function(product){

             if(product['name']==product_name){
               if(parseInt(product['quantity'])>parseInt(quantity)){
                 console.log('Quantity required for product '+product['name']+' '+product['quantity']+' is greater than available '+quantity);
                 process.exit(1)
               }else{
                 total += parseInt(price) * parseInt(product['quantity']);
               }
             }
         })
    })
    .on("end", function(){
         console.log("done");
         let totalWithVat = total * (1+ 0.23);
         console.log("Total price:", totalWithVat);
    }).on("error", function (error) {
        console.error("The following error occured:", error);
    })
 stream.pipe(csvStream);

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#image1:hover {
  filter: brightness(50%);
}

.desc {
  padding: 15px;
  text-align: center;
}

如您所见，当您运行它并将其悬停在小照片上时，它会出现一个较大的版本（较小的版本会变得更暗）。但是，当您从较小的版本移到较大的版本时，小照片将恢复正常。

有人可以向我解释一下，当光标位于CSS上的小照片或大照片上时，如何使小照片变暗（选中）？

非常感谢您。

Answer 1

代替#image1:hover，对.content:hover #image1应用变暗

Answer 2

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown:hover #image1 {
    filter: brightness(50%);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.desc {
    padding: 15px;
    text-align: center;
}

<div class="dropdown">
  <img id="image1" src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
    <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
    <div class="desc">Beautiful Cinque Terre</div>
  </div>
</div>

悬停后保持选中元素

2 个答案: