javascript - 单击以通过无 Javascript 注入(inject)的 CSS 放大缩略图

标签 javascript html css

我正在尝试实现与您在 this 上看到的类似的效果页面 - 将鼠标悬停在任何缩略图上时，主图像会放大并更改为悬停在其上的缩略图。

基于我在 stackoverflow 上阅读的内容这是通过 CSS 完成的，无需注入(inject)任何 Javascript。

我用来显示/格式化图像的 HTML 如下:

#DIV_2 {
    color: rgb(51, 51, 51);
    float: left;
    height: 547px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 705px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 363.5px 284.5px;
    transform-origin: 363.5px 284.5px;
    caret-color: rgb(51, 51, 51);
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgb(203, 203, 203);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 0px 20px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
    padding: 10px;
}


/*#DIV_2*/

#DIV_2:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#DIV_2:after*/

#DIV_2:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#DIV_2:before*/

#PRODUCT_TITLE_DIV {
    color: rgb(42, 42, 42);
    float: left;
    height: 23px;
    text-align: center;
    text-decoration: none solid rgb(42, 42, 42);
    width: 705px;
    column-rule-color: rgb(42, 42, 42);
    perspective-origin: 352.5px 24px;
    transform-origin: 352.5px 24px;
    caret-color: rgb(42, 42, 42);
    border-top: 0px none rgb(42, 42, 42);
    border-right: 0px none rgb(42, 42, 42);
    border-bottom: 5px solid rgb(255, 102, 0);
    border-left: 0px none rgb(42, 42, 42);
    font: normal normal 700 normal 20px / normal Arial;
    margin: 0px 0px 25px;
    outline: rgb(42, 42, 42) none 0px;
    overflow: hidden;
    padding: 10px 0px;
}


/*#PRODUCT_TITLE_DIV*/

#PRODUCT_TITLE_DIV:after {
    color: rgb(42, 42, 42);
    text-align: center;
    text-decoration: none solid rgb(42, 42, 42);
    column-rule-color: rgb(42, 42, 42);
    caret-color: rgb(42, 42, 42);
    border: 0px none rgb(42, 42, 42);
    font: normal normal 700 normal 20px / normal Arial;
    outline: rgb(42, 42, 42) none 0px;
}


/*#PRODUCT_TITLE_DIV:after*/

#PRODUCT_TITLE_DIV:before {
    color: rgb(42, 42, 42);
    text-align: center;
    text-decoration: none solid rgb(42, 42, 42);
    column-rule-color: rgb(42, 42, 42);
    caret-color: rgb(42, 42, 42);
    border: 0px none rgb(42, 42, 42);
    font: normal normal 700 normal 20px / normal Arial;
    outline: rgb(42, 42, 42) none 0px;
}


/*#PRODUCT_TITLE_DIV:before*/

#IMAGE_DIV_SECTION {
    bottom: 0px;
    color: rgb(51, 51, 51);
    float: left;
    height: 444px;
    left: 0px;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    top: 0px;
    width: 705px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 352.5px 222px;
    transform-origin: 352.5px 222px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 0px 30px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#IMAGE_DIV_SECTION*/

#IMAGE_DIV_SECTION:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMAGE_DIV_SECTION:after*/

#IMAGE_DIV_SECTION:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMAGE_DIV_SECTION:before*/

#SHOW_SMALL_DIV {
    color: rgb(51, 51, 51);
    float: left;
    height: 444px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 240px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 355px 222px;
    transform-origin: 355px 222px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
    padding: 0px 0px 0px 470px;
}


/*#SHOW_SMALL_DIV*/

#SHOW_SMALL_DIV:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_SMALL_DIV:after*/

#SHOW_SMALL_DIV:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_SMALL_DIV:before*/

#THUMBNAIL_IMAGE_DIV_1,
#THUMBNAIL_IMAGE_DIV_2,
#THUMBNAIL_IMAGE_DIV_3,
#THUMBNAIL_IMAGE_DIV_4,
#THUMBNAIL_IMAGE_DIV_5,
#THUMBNAIL_IMAGE_DIV_6,
#THUMBNAIL_IMAGE_DIV_7,
#THUMBNAIL_IMAGE_DIV_8 {
    color: rgb(51, 51, 51);
    float: left;
    height: 100px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 100px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 51px 51px;
    transform-origin: 51px 51px;
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 8px 9px 0px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#THUMBNAIL_IMAGE_DIV_1, #THUMBNAIL_IMAGE_DIV_2, #THUMBNAIL_IMAGE_DIV_3, #THUMBNAIL_IMAGE_DIV_4, #THUMBNAIL_IMAGE_DIV_5, #THUMBNAIL_IMAGE_DIV_6, #THUMBNAIL_IMAGE_DIV_7, #THUMBNAIL_IMAGE_DIV_8*/

#THUMBNAIL_IMAGE_DIV_1:after,
#THUMBNAIL_IMAGE_DIV_2:after,
#THUMBNAIL_IMAGE_DIV_3:after,
#THUMBNAIL_IMAGE_DIV_4:after,
#THUMBNAIL_IMAGE_DIV_5:after,
#THUMBNAIL_IMAGE_DIV_6:after,
#THUMBNAIL_IMAGE_DIV_7:after,
#THUMBNAIL_IMAGE_DIV_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#THUMBNAIL_IMAGE_DIV_1:after, #THUMBNAIL_IMAGE_DIV_2:after, #THUMBNAIL_IMAGE_DIV_3:after, #THUMBNAIL_IMAGE_DIV_4:after, #THUMBNAIL_IMAGE_DIV_5:after, #THUMBNAIL_IMAGE_DIV_6:after, #THUMBNAIL_IMAGE_DIV_7:after, #THUMBNAIL_IMAGE_DIV_8:after*/

#THUMBNAIL_IMAGE_DIV_1:before,
#THUMBNAIL_IMAGE_DIV_2:before,
#THUMBNAIL_IMAGE_DIV_3:before,
#THUMBNAIL_IMAGE_DIV_4:before,
#THUMBNAIL_IMAGE_DIV_5:before,
#THUMBNAIL_IMAGE_DIV_6:before,
#THUMBNAIL_IMAGE_DIV_7:before,
#THUMBNAIL_IMAGE_DIV_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#THUMBNAIL_IMAGE_DIV_1:before, #THUMBNAIL_IMAGE_DIV_2:before, #THUMBNAIL_IMAGE_DIV_3:before, #THUMBNAIL_IMAGE_DIV_4:before, #THUMBNAIL_IMAGE_DIV_5:before, #THUMBNAIL_IMAGE_DIV_6:before, #THUMBNAIL_IMAGE_DIV_7:before, #THUMBNAIL_IMAGE_DIV_8:before*/

#THUMBNAIL_IMG_1,
#THUMBNAIL_IMG_2,
#THUMBNAIL_IMG_3,
#THUMBNAIL_IMG_4,
#THUMBNAIL_IMG_5,
#THUMBNAIL_IMG_6,
#THUMBNAIL_IMG_7,
#THUMBNAIL_IMG_8 {
    color: rgb(51, 51, 51);
    height: 110px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 110px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 55px 55px;
    transform-origin: 55px 55px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_7, #THUMBNAIL_IMG_2, #THUMBNAIL_IMG_3, #THUMBNAIL_IMG_4, #THUMBNAIL_IMG_5, #THUMBNAIL_IMG_6, #THUMBNAIL_IMG_7, #THUMBNAIL_IMG_8*/

#THUMBNAIL_IMG_1:after,
#THUMBNAIL_IMG_2:after,
#THUMBNAIL_IMG_3:after,
#THUMBNAIL_IMG_4:after,
#THUMBNAIL_IMG_5:after,
#THUMBNAIL_IMG_6:after,
#THUMBNAIL_IMG_7:after,
#THUMBNAIL_IMG_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_7:after, #THUMBNAIL_IMG_2:after, #THUMBNAIL_IMG_3:after, #THUMBNAIL_IMG_4:after, #THUMBNAIL_IMG_5:after, #THUMBNAIL_IMG_6:after, #THUMBNAIL_IMG_7:after, #THUMBNAIL_IMG_8:after*/

#THUMBNAIL_IMG_1:before,
#THUMBNAIL_IMG_2:before,
#THUMBNAIL_IMG_3:before,
#THUMBNAIL_IMG_4:before,
#THUMBNAIL_IMG_5:before,
#THUMBNAIL_IMG_6:before,
#THUMBNAIL_IMG_7:before,
#THUMBNAIL_IMG_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_7:before, #THUMBNAIL_IMG_2:before, #THUMBNAIL_IMG_3:before, #THUMBNAIL_IMG_4:before, #THUMBNAIL_IMG_5:before, #THUMBNAIL_IMG_6:before, #THUMBNAIL_IMG_7:before, #THUMBNAIL_IMG_8:before*/

#SHOW_BIG_IMAGE_DIV_1 {
    bottom: -6px;
    color: rgb(51, 51, 51);
    height: 450px;
    left: 0px;
    position: absolute;
    right: 240px;
    text-decoration: none solid rgb(51, 51, 51);
    top: 0px;
    width: 450px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 225px 225px;
    transform-origin: 225px 225px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 5px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#SHOW_BIG_IMAGE_DIV_1*/

#SHOW_BIG_IMAGE_DIV_1:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_1:after*/

#SHOW_BIG_IMAGE_DIV_1:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_1:before*/

#IMG_1 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 237.5px 237.5px;
    transform-origin: 237.5px 237.5px;
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_1*/

#IMG_1:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_1:after*/

#IMG_1:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_1:before*/

#SHOW_BIG_IMAGE_DIV_2,
#SHOW_BIG_IMAGE_DIV_3,
#SHOW_BIG_IMAGE_DIV_4,
#SHOW_BIG_IMAGE_DIV_5,
#SHOW_BIG_IMAGE_DIV_6,
#SHOW_BIG_IMAGE_DIV_7,
#SHOW_BIG_IMAGE_DIV_8 {
    color: rgb(51, 51, 51);
    display: none;
    float: left;
    height: 450px;
    left: 0px;
    position: absolute;
    text-decoration: none solid rgb(51, 51, 51);
    top: 0px;
    width: 450px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 5px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#SHOW_BIG_IMAGE_DIV_2, #SHOW_BIG_IMAGE_DIV_3, #SHOW_BIG_IMAGE_DIV_4, #SHOW_BIG_IMAGE_DIV_5, #SHOW_BIG_IMAGE_DIV_6, #SHOW_BIG_IMAGE_DIV_7, #SHOW_BIG_IMAGE_DIV_8*/

#SHOW_BIG_IMAGE_DIV_2:after,
#SHOW_BIG_IMAGE_DIV_3:after,
#SHOW_BIG_IMAGE_DIV_4:after,
#SHOW_BIG_IMAGE_DIV_5:after,
#SHOW_BIG_IMAGE_DIV_6:after,
#SHOW_BIG_IMAGE_DIV_7:after,
#SHOW_BIG_IMAGE_DIV_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_2:after, #SHOW_BIG_IMAGE_DIV_3:after, #SHOW_BIG_IMAGE_DIV_4:after, #SHOW_BIG_IMAGE_DIV_5:after, #SHOW_BIG_IMAGE_DIV_6:after, #SHOW_BIG_IMAGE_DIV_7:after, #SHOW_BIG_IMAGE_DIV_8:after*/

#SHOW_BIG_IMAGE_DIV_2:before,
#SHOW_BIG_IMAGE_DIV_3:before,
#SHOW_BIG_IMAGE_DIV_4:before,
#SHOW_BIG_IMAGE_DIV_5:before,
#SHOW_BIG_IMAGE_DIV_6:before,
#SHOW_BIG_IMAGE_DIV_7:before,
#SHOW_BIG_IMAGE_DIV_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_2:before, #SHOW_BIG_IMAGE_DIV_3:before, #SHOW_BIG_IMAGE_DIV_4:before, #SHOW_BIG_IMAGE_DIV_5:before, #SHOW_BIG_IMAGE_DIV_6:before, #SHOW_BIG_IMAGE_DIV_7:before, #SHOW_BIG_IMAGE_DIV_8:before*/

#IMG_2,
#IMG_3,
#IMG_5,
#THUMBNAIL_IMG_1 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_2, #IMG_3, #IMG_5, #IMG_7*/

#IMG_2:after,
#IMG_3:after,
#IMG_5:after,
#THUMBNAIL_IMG_1:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_2:after, #IMG_3:after, #IMG_5:after, #IMG_7:after*/

#IMG_2:before,
#IMG_3:before,
#IMG_5:before,
#THUMBNAIL_IMG_1:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_2:before, #IMG_3:before, #IMG_5:before, #IMG_7:before*/

#IMG_4,
#IMG_6 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_4, #IMG_6*/

#IMG_4:after,
#IMG_6:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_4:after, #IMG_6:after*/

#IMG_4:before,
#IMG_6:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_4:before, #IMG_6:before*/

#IMG_8 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_8*/

#IMG_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_8:after*/

#IMG_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_8:before*/
<div id="DESCRIPTION_DIV">
    <div id="DIV_2">
        <div class="product_title_class" id="PRODUCT_TITLE_DIV">New Acoustic Violin 4/4 Full Size with Case and Bow Rosin Wood</div>
        <div id="IMAGE_DIV_SECTION">
            <div class="show_small_class" id="SHOW_SMALL_DIV">
                <div id="THUMBNAIL_IMAGE_DIV_1"><img src="https://yallstore.s3.amazonaws.com/Y%2FY00326%2FY00326-23-180516135859.jpg" name="p1" id="THUMBNAIL_IMG_1">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_1"><img src="https://yallstore.s3.amazonaws.com/Y%2FY00326%2FY00326-23-180516135859.jpg" id="IMG_1" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_2"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg" name="p2" id="THUMBNAIL_IMG_2">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_2"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg" id="IMG_2" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_3"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-13_002-140125190407.jpg" name="p3" id="THUMBNAIL_IMG_3">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_3"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-13_002-140125190407.jpg" id="IMG_3" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_4"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-12_001-140124181647.jpg" name="p4" id="THUMBNAIL_IMG_4">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_4"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-12_001-140124181647.jpg" id="IMG_4" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_5"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-10_001-140125211344.jpg" name="p5" id="THUMBNAIL_IMG_5">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_5"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-10_001-140125211344.jpg" id="IMG_5" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_6"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-6_001-140122143027.jpg" name="p6" id="THUMBNAIL_IMG_6">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_6"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-6_001-140122143027.jpg" id="IMG_6" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_7"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-5_001-140122143020.jpg" name="p7" id="THUMBNAIL_IMG_7">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_7"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-5_001-140122143020.jpg" id="IMG_7" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_8"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-1-140122143012.jpg" name="p8" id="THUMBNAIL_IMG_8">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_8"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-1-140122143012.jpg" id="IMG_8" name="mi"></div>
                </div>
            </div>
        </div>
    </div>

我能够在 Codepen 上正确格式化图像(请参阅 Codepen 链接上的 CSS 样式信息，此处发布太长)但是当我将鼠标悬停在辅助/缩略图上时，主图像不会改变。

此外，如果您将鼠标悬停在列表底部的“运输”、“付款”、“返回”、“反馈”部分，这会导致其下方的文本自动更改 - 这是如何实现的？

谢谢

最佳答案

老实说，我会完全重新处理标记。如果您将图像定义为背景而不是 img 标签，则可以使用 :hover 和 ~ 通用兄弟选择器的巧妙组合，通过 CSS 轻松设置背景。

如果您更像这样安排您的 HTML:

<div class="container">
  <a class="thumbnail image-1" id="image-1" href="#image-1"></a>
  <a class="thumbnail image-2" id="image-2" href="#image-2"></a>
  <a class="thumbnail image-3" id="image-3" href="#image-3"></a>
  <a class="thumbnail image-4" id="image-4" href="#image-4"></a>
  <a class="thumbnail image-5" id="image-5" href="#image-5"></a>
  <a class="thumbnail image-6" id="image-6" href="#image-6"></a>
  <a class="thumbnail image-7" id="image-7" href="#image-7"></a>
  <a class="thumbnail image-8" id="image-8" href="#image-8"></a>
  <div class="enlarged"></div>
</div>

您可以使用此 CSS 来确定放大框中显示的图像:

.image-1, .image-1:hover ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg) !important; }
.image-2, .image-2:hover ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/images%2FY00326-13_002-140125190407.jpg) !important; }

/* etc ... */

基本上这是在设置缩略图的背景，然后如果用户将鼠标悬停在缩略图上，它将选择同一嵌套层中具有“放大”类的任何元素，并应用背景对那个也是。我们在这里使用 !important 是因为我们希望悬停优先于点击，这将我们带到下一部分!

要基于单击的元素，请像这样使用 :target:

.image-1:target ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/Y%2FY00326%2FY00326-23-180516135859.jpg); }
.image-2:target ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg); }
/* etc ... */

这实际上是告诉浏览器根据 URL 末尾的散列应用样式。当“目标”(散列)与相关元素的 ID 匹配时，它将应用这些样式。那么我们当然可以用同样的方式使用~通用兄弟选择器。

这是一个有效的 codepen可以玩的例子!

关于javascript - 单击以通过无 Javascript 注入(inject)的 CSS 放大缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51054042/

上一篇：javascript - 为什么即使 div 没有高度，transition with translate 也会占用空间？

下一篇：Python flask 服务器需要很长时间才能启动

相关文章：

JavaScript scrollTop 滚动到错误的 div

javascript - 如何获取从240个字符到最后一个字符的所有字符？

JavaScript: Canvas 高度与我设置的值不同

javascript - 使用 jQuery 设置替代行的颜色？

html - 在 Bootstrap 中定义多栏以表示白天

javascript - IE9 悬停错误 - 移动一行后悬停状态保持不变

css - IE7 CSS 分组

javascript - 无法正确从 html 调用 vue 函数(组件渲染函数中的无限更新循环)

javascript - ajax/javascript 在 ie 中不起作用

javascript - 如何检索加载需要使用 PhantomJS 或其他工具单击鼠标的 ajax 数据

©2024 IT工具网  联系我们