Question

我希望{hiling transform height .bar 3px .wrapper transition。我知道我必须使用transform和transform，但我不知道如何通过徘徊他的父母来div我的孩子transform。目前，我div只是我的父母transform（很明显为什么）。如何通过将我的父母height悬停在我的孩子的div .wrapper上（应该是.wrapper { display: flex; flex-direction: column; justify-content: flex-end; width: 200px; height: 100px; background-color: lightgreen; transition: all 1s ease-in-out; } .wrapper:hover { /*ON HOVER WRAPPER TRANSFORM HEIGHT OF BAR TO 3px*/ transform: scale(2); cursor: pointer; } .bar { width: 100%; height: 0px; background-color: blue; } .bar:hover {}底部的上下栏）？请注意，父div不应该转换他的维度，只是孩子！

<div class="wrapper">
  <div class="bar"></div>
</div>

require 'csv'
class CopyFile
  def self.create_duplicate_file(file_name)

    CSV.open(file_name, "wb") do |output_row|
      output_row << CSV.open('input.csv', 'r') { |csv| csv.first }
      CSV.foreach('input.csv', headers: true) do |row|
      output_row << row
      end
    end
  end
end

puts "Insert duplicate file name"
file_name = gets.chomp
file_name = file_name+".csv"
CopyFile.create_duplicate_file(file_name)

puts "\nDuplicate File Created."

Answer 1

使用子选择器.wrapper:hover>.bar：

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transition: all 1s ease-in-out;
}

.wrapper:hover {
  cursor: pointer;
}

.bar {
  width: 100%;
  height: 0px;
  background-color: blue;
  transition: height 200ms ease-in-out;
}

.wrapper:hover>.bar {
  height: 3px;
}

<div class="wrapper">
  <div class="bar"></div>
</div>

Answer 2

使用此CSS选择器>来执行此操作，

＆＃13;

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transition: all 1s ease-in-out;
}


/*.wrapper:hover {
  transform: scale(2);
  cursor: pointer;
}*/

.bar {
  width: 100%;
  height: 0px;
  background-color: blue;
  transition: 0.6s ease;
}

.wrapper:hover > .bar {
  height: 10px;
}

＆＃13;

<div class="wrapper">
  <div class="bar"></div>
</div>

＆＃13;

在父div上悬停时转换子div的高度

2 个答案: