JSFiddle - React, Tailwind, and code Playground

by Luis Felipe Morais

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow JS</title>

</head>

<body>

     <!-- Parte total do slideshow-->
    <div id="tudo">

        <!-- Coluna 1 - Nome das Notícias -->
        <div id="coluna_um">
            <ul>
                <li>
                <a href="" onmouseover='' id="noticia1" class="fotos" data-slide="foto1">
                        <h3>Teste de Título 1</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>

                </a>
                </li>
                <li>
                <a href="" onmouseover="" id="noticia2" class="fotos" data-slide="foto2">
                        <h3>Teste de Título 2</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>
                </a>
                </li>
                <li>
                <a href="" onmouseover="" id="noticia3" class="fotos" data-slide="foto3">
                        <h3>Teste de Título 3</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>
                </a>
                </li>
                <li>
                <a href="" onmouseover="" id="noticia4" class="fotos" data-slide="foto4">
                        <h3>Teste de Título 4</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>
                </a>
                </li>
            </ul>
        </div>
        
        <!-- Coluna 2 - Foto das Notícias -->
        <div id="coluna_dois">
            <ul>
                <a href="#" id="foto1">
                    <li>
                        <div class="info">Lorem Ipsun sit amet</div>
                    </li>
                </a>
                <a...

CSS

#tudo{
            width:1000px;
            height:400px;
            border:1px solid #333333;
            margin:120px auto;
            padding:0 auto;
        }
        
        #coluna_um{
            width:30%;
            background:#F8F7F7;
            float:left;
            margin-top:0 !important;
            height:400px;
        }
        
            #coluna_um ul{
                text-decoration:none;
                list-style:none;
                margin:0px !important;
                padding:0px;
                width:97%;
            }
            
                #coluna_um ul a li{
                    text-decoration:none;
                    list-style:none;
                    width:100%;
                    padding:5px;
                    height:88px;
                    border-bottom:1px solid #CCCCCC;
                    border-top:1px solid #FFFFFF;
                    margin:0px !important;
                    opacity:1;
                }
                
                    #coluna_um ul a li:hover{
                        text-decoration:none;
                        list-style:none;
                        width:100%;
                        height:88px;
                        background:#FFFFFF;
                        margin:0px !important;
                    }
                    
        #coluna_dois{
            width:70%;
            float:left;
            margin-top:0 !important;
            height:400px;
        }
        
            #coluna_dois ul{
                text-decoration:none;
                list-style:none;
                margin:0px !important;
                padding:0px;
                width:98%;
            }
            
                #coluna_dois ul a li{
                    text-decoration:none;
                    list-style:none;
                    width:100%;
                    padding:6px;
                    height:88px;
                }
                
                #coluna_dois ul a...

JavaScript

function initialize(){
    var nodeList = document.querySelectorAll(".fotos"), 
        i = k = nodeList.length, j;
    while (i--){ // Add the black magic in mouseover for every fucking .fotos
     nodeList[i].addEventListener("mouseover", function() {
            j=k;
            //Iterate over the slides to hide them, couse the mothafocka NodeList dont accept style =\
            // i'm only doing this again cause i'm a sociopath
            while (j--){ // Lets hide that shit
                document.getElementById(nodeList[j].getAttribute('data-slide')).style.display = "none";
            }                     
        // And show like a Britney shows her pussy
        document.getElementById(this.getAttribute('data-slide')).style.display = "block";
    });
    }
}// FINISH HIM

window.addEventListener("DOMContentLoaded", initialize, true); //u mo bu kai fei di tal