Блог

Я пытаюсь заставить выделенный блок кода расширяться при наведении курсора мыши, чтобы упростить чтение кода (эта часть очень проста). Блок кода имеет фиксированную ширину и центрирован.

jsFiddle

 .code-wrapper {
    margin: auto;
    width: 50em;
}

pre {
    background: #e5e5e5;
    left: 0;
    max-width: 200%;
    overflow: auto;
    position: relative;
    transition: all 500ms;
    width: 100%;
}

pre:hover {
    left: -50%;
    width: 200%;
}
  

Единственная потенциальная проблема заключается в том, что если ширина экрана меньше 120em (60em x 200%), то код будет расширяться за пределы экрана.

Существуют ли какие-либо способы сделать это без javascript, которые предотвращают расширение блока кода за пределы краев экрана?

Попробуйте использовать следующий CSS-код:

 @media all and (min-width: 85em){
    pre:hover {
        left: -25%;
        width: 150%;
    }    
}

@media all and (min-width: 110em){
    pre:hover {
        left: -50%;
        width: 200%;
    }    
}