페이지 이동 직후 :hover가 적용되지 않습니다.

조회수 277회

Python QWebEngineView HTMl CSS Javascript 를 이용해서 크롤링한 웹툰을 보는 프로그램을 만들고 있습니다.

  • 페이지 이동을 위해 :hover가 적용 된 곳으로 이동을하면 배경색이 핑크색으로 바뀝니다.
  • 클릭하면 페이지가 이동됩니다.
  • 페이지 이동 직후 :hover 적용된 곳에 마우스 커서가 그대로 있는데 배경색은 기본색인 흰색입니다
  • 마우스를 살짝이라도 움직이거나 클릭을 하거나 하면 :hover가 적용돼서 배경색이 핑크색으로 바뀝니다.

제가 원하는건 페이지 이동 직후에도 :hover 위치에 마우스 커서가 있으면 :hover가 적용돼서 배경색이 핑크색으로 나왔으면 합니다.

시도 해 본 방법은

  1. 구글에서 찾아본다. -> 못 찾았습니다.
  2. 자바스크립트에서 페이지 이동 후 마우스 커서 위치를 파악해 마우스 커서 위치가 :hover위에 있으면 핑크색의 className을 추가해준다. -> onload이벤트에선 마우스 커서 위치를 가져 올 수가 없었습니다.
  3. 페이지 이동 후 파이썬에서 pyautogui를 이용해 마우스를 움직여준다. -> 움직여 봤는데 배경색이 바뀌진 않았습니다. 그리고 한 픽셀식 움직였는데도 마우스 움직이는게 너무 잘 보여서 보기 안좋더군요.

이렇게 생각해 본 건 다 해봤는데 모두 실패했습니다. 도움 부탁드립니다.

============================================================================ 소스코드를 첨부해 봅니다. 화면 상단으로 마우스를 이동시키면 핑크색 바가 나오고 f5를 누르면 마우스 위치는 그대로인데 핑크색은 사라집니다. 마우스를 클릭하거나 움직이거나 해야 다시 핑크색으로 바뀝니다 html과 css만으로도 구현이 되고 있으니 태그는 html과 css만 남기겠습니다.

<html lang="ko">

<head>
    <style>
        body,
        button,
        dd,
        dl,
        dt,
        fieldset,
        form,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        input,
        legend,
        li,
        ol,
        p,
        select,
        table,
        td,
        textarea,
        th,
        ul {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: none
        }

        body,
        input,
        select,
        textarea {
            font-size: 14px;
            line-height: 1.25em
        }

        .s button,
        .s input,
        .s select,
        .s table,
        .s textarea,
        body,
        body.s,
        input,
        select,
        textarea {
            font-family: Helvetica, sans-serif
        }

        body {
            background-color: #fff;
            color: #000;
            word-wrap: break-word;
            word-break: break-all
        }

        li {
            list-style: none
        }

        fieldset,
        img {
            border: none
        }

        a {
            color: rgba(1, 1, 1, .2);
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, .06)
        }

        a,
        label {
            cursor: pointer
        }

        img {
            vertical-align: top
        }

        .fx2 {
            width: 100%
        }

        .progress {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2200;
            width: 00%;
            height: 2px;
            background-color: rgb(255, 0, 0);
            opacity: 1;
        }

        .toon_view_lst .viewer_fixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2100;
            width: 100%;
            height: 47px;
            /*border-bottom: 1px solid rgba(32, 36, 40, .1);*/
            background-color: hsla(0, 0%, 100%, .1);
            text-align: center;
            opacity: 0.5;
        }

        .toon_view_lst .viewer_fixed>span {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2100;
            width: 100%;
            height: 47px;
            /*border-bottom: 1px solid rgba(32, 36, 40, .1);*/
            background-color: hsla(0, 0%, 100%, .1);
            text-align: center;
            opacity: 0.5;
        }

        .toon_view_lst .viewer_fixed>span:hover {
            color: rgb(1, 1, .1);
            opacity: .5;
        }

        .toon_view_lst .viewer_fixed:hover {
            pointer-events: auto;
            font-weight: bold;
            color: rgb(1, 1, 1);
            background-color: rgba(255, 230, 230, .3);
            opacity: 1;
        }

        .toon_view_lst .viewer_fixed>a:hover {
            pointer-events: auto;
            border-radius: 5px;
            font-weight: bold;
            color: rgb(1, 1, 1);
            background-color: rgba(255, 230, 230, .6);
            opacity: 1;
        }

        .toon_view_lst .viewer_fixed .tit {
            display: block;
            margin: 0 100px;
            font-size: 18px;
            font-weight: normal;
            line-height: 47px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .toon_view_lst .viewer_fixed .prev {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100%;
            font-size: 13px;
            font-weight: lighter;
            vertical-align: top;
            line-height: 47px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .toon_view_lst .viewer_fixed .prev>span {
            font-size: 20;
            vertical-align: middle;
        }

        .toon_view_lst .viewer_fixed .next {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100%;
            font-size: 13px;
            font-weight: lighter;
            vertical-align: top;
            line-height: 47px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .toon_view_lst .viewer_fixed .next>span {
            font-size: 20;
            vertical-align: middle;
        }

        div.messageBox {
            position: fixed;
            bottom: 10px;
            margin: 0 10px;
            z-index: 2100;
            height: 47px;
            width: 100%;
            border: 2px solid rgba(32, 36, 40, .1);
            background-color: hsla(0, 0%, 100%, .7);
            text-align: center;
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>

<body>
    <div id="ct">
        <div class="toon_view_lst dragscroll" id="toonLayer">
            <div class="viewer_fixed viewerGnb  " id="viewer_fixed">
                <a class="tit  " id="title" href="#"> </a>
                <a class="prev " id="prev" href="#"> </a>
                <a class="next " id="next" href="#"> </a>

                <span class="prev" id="zeroPrev"> </span>
                <span class="next" id="zeroNext"> </span>
            </div>
            <div class="progress" id="progress">
            </div>
            <ul id="toonList">
            </ul>
        </div>
    </div>
    <div class="messageBox" id="msgBox"> </div>
</body>

</html>
  • 크롤링한 웹툰을 본다.. 그러니까 웹툰을 저장해서 보는 프로그램을 짜고 있다는 말인 거죠? 초보자 2022.11.3 18:15
  • 네 크롤링해서 zip파일로 만드는거 까진 다 했고... 뷰어도 거의 다 했는데 약간의 디테일이 부족한거죠.. 금밈미 2022.11.3 18:44
  • stackoverflow에 2011년에 불가능하다는 답변이 있었는데 새로운 방법이 생겼을까 해서 질문을 올렸는데 답이 없는걸 보면 아직 불가능한가보네요.. 금밈미 2022.11.5 18:01
  • css를 :hover가 아닌 .hover로 만들고 mouseover, mouseout이벤트로 hover를 구현하고 cookie는 사용이 안되길래 QWebChannel을 이용해서 해결했습니다... 금밈미 2022.11.8 00:22

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)