const jsSkill = document.querySelector("div.skill-link"); //링크를 걸고 없앨 공간이다.
const jsImg = document.querySelector(".js-img"); //이미지1번이라고 생각하자
const pythonImg = document.querySelector(".python-img") // 이미지2번이라고 생각하자
const newList = document.querySelector("div.new-list")// 하나의 공간 여기를 벗어나면 링크를 지울것이다.
//접근할 링크를 변수로 선언
const jsLink = "<a href='https://kimjuno97.github.io/brckGame-js-/' target = _blank>벽돌게임</a><br><a href ='https://kimjuno97.github.io/color-Zilla/' target = _blank>칼라 픽</a>";
const pythonLink = "<a href='https://github.com/kimjuno97/Python-practice' target = _blank>비트코인 자동매매</a>"
jsImg.addEventListener('mouseover',jsSkillList);
newList.addEventListener('mouseleave',jsSkillListDel);
pythonImg.addEventListener('mouseover',pythonList);
function jsSkillList() {
jsSkill.innerHTML = jsLink
}
//innerHTML로 추가했던 text를 지워줄 함수
function jsSkillListDel(){
jsSkill.innerHTML = '';
}
function pythonList() {
jsSkill.innerHTML = pythonLink
}
펌할때 사용하세요
const jsSkill = document.querySelector(이벤트 발생시 링크추가할공간);
const jsImg = document.querySelector(이벤트 넣을공간1);
const pythonImg = document.querySelector(이벤트 넣을공간2);
// 공간은 더 추가해도된다.
const newList = document.querySelector(이벤트 발생시 링크제거할 공간)
const 링크2개예시 = "<a href='여기에링크넣기' target = _blank>text1</a><br><a href ='여기에링크넣기' target = _blank>text2</a>";
const 링크1개 = "<a href='여기에링크넣기' target = _blank>text</a>"
jsImg.addEventListener('mouseover',링크2개예시);
newList.addEventListener('mouseleave',jsSkillListDel);
pythonImg.addEventListener('mouseover',링크1개예시);
function jsSkillList() {
jsSkill.innerHTML = 링크2개예시
}
//추가한 부분 공백으로 만들어 지웠다.
function jsSkillListDel(){
jsSkill.innerHTML = '';
}
function pythonList() {
jsSkill.innerHTML = 링크1개
}
한글로 타이핑 한 부분은 본인 코드에 적용 시 바꿔주면 된다.
위 방법 외에 더 깔끔한 방법은 분명 있습니다..!