【发布时间】：2020-01-29 07:01:26
【问题描述】：
我正在尝试在 css 中设置翻转卡片，悬停时，但无法让它工作。
注意：我知道我将需要使用 JS 来使点击按我想要的方式工作，但我只是想弄清楚需要设置哪些属性才能获得我想要的效果，并使用悬停作为中介。
JS解释（底部代码）：
我有一个从 API 制作口袋妖怪卡片的函数，并将它们放入一个名为“frontFace”的 div 类中。该函数有一个回调函数，它为点击设置事件处理程序，并在名为“backface”的单独（点击时动态生成）div 中返回特定口袋妖怪展开的详细信息以及点击时的另一个 AJAX 请求。这两个 div 都是名为“card-container”的 div 类的子类，每张卡都有自己的容器，所以总共有 151 个容器，这些都在主容器中。如果不明显，则背面位于正面后面，需要在翻转时显示。
https://jsfiddle.net/qfzmxvty/
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Pokedex</title>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
<body>
<h1 id="main-header">Pokedex</h1>
<div id="main-container">
</div>
<script src="index.js" type="text/javascript">
</script>
</body>
</html>
CSS：
*{
font-family: Arial, Helvetica, San-serrif;
}
h1 {
background: red;
color: white;
font-size: 48px;
text-align: center;
}
#main-container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
.card-container {
position: relative;
display: flex;
transform-style: preserve-3d;
flex-wrap: wrap;
justify-content: center;
align-content: center;
flex-basis: 31%;
height: 400px;
width:400px;
border: black 3px solid;
margin: 3px;
}
.frontFace, .backFace {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
flex-basis: 31%;
border: 1px black solid;
text-align: center;
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.backFace {
transform: rotateY(180deg);
height: 100%
width: 100%;
}
img {
border: black 1px solid;
}
#main-container:hover.card-container {
transform: rotateY(180deg);
}
JS：
const container = document.getElementById('main-
container');
function getPokemon(callback) {
const xhr = new XMLHttpRequest();
const url = 'https://pokeapi.co/api/v2/pokemon/';
xhr.onload = function() {
if(xhr.status === 200) {
const pokemon = JSON.parse(xhr.responseText);
pokemon.results.forEach((poke, index)=>{
let cardContainer =
document.createElement('div');
cardContainer.className = 'card-
container';
container.appendChild(cardContainer);
let frontFace =
document.createElement('div');
frontFace.className = 'frontFace';
cardContainer.appendChild(frontFace);
let sprite = document.createElement('img')
sprite.src =
`https://raw.githubusercontent.com/PokeAPI/sprites/
master/
sprites/pokemon/${(index + 1).toString()}.png`
frontFace.appendChild(sprite);
let name = document.createElement('h4');
name.innerText = poke.name;
frontFace.appendChild(name);
})
callback();
}
}
xhr.open('GET', url, true);
xhr.send();
}
function cardBack() {
const endPoint = this.lastChild.innerText;
const card = this;
console.log(this)
const xhr = new XMLHttpRequest();
xhr.onload = function() {
if(xhr.status === 200) {
const details = JSON.parse(xhr.responseText);
let backFace = document.createElement('div');
backFace.className = 'backFace';
card.appendChild(backFace);
let name = document.createElement('h4');
name.innerHTML = details.name;
let type = document.createElement('h4');
type.innerHTML = details.types[0].type.name;
backFace.appendChild(name);
backFace.appendChild(type);
}
}
xhr.open('GET', 'https://pokeapi.co/api/v2/pokemon/' +
endPoint, true);
xhr.send();
}
getPokemon(()=>{
const cardFront = document.querySelectorAll('.card-
container');
cardFront.forEach((card)=> {
card.addEventListener('click', cardBack);
})
});
【问题讨论】：
标签： javascript html css