change and text color onmouseover an js

in that html

        <article id="art">
            <h1 class="hstyle">1</h1>
            <p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, sed.</p>
        </article>

        <article id="art">
            <h1 class="hstyle">2</h1>
            <p class="pstyle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, cumque!</p>
        </article>

        <article id="art">
            <h1 class="hstyle">3</h1>
            <p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis, officia!</p>
        </article>

        <article id="art">
            <h1 class="hstyle">4</h1>
            <p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, consequatur!</p>
        </article>

        <article id="art">
            <h1 class="hstyle">5</h1>
            <p class="pstyle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero, sed.</p>
        </article>

        <article id="art">
            <h1 class="hstyle">6</h1>
            <p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia, asperiores?</p>
        </article>
    </div>

in javascript i want to change backgroundcolor of all articles onmouseover and in the same time change h1 and p text color onmouseover the articles
i can do backgroundcolor change in js :

a = document.getElementsByTagName("article");
h = document.getElementsByClassName("hstyle");
p = document.getElementsByClassName("pstyle");
console.log(a);
console.log(h);
console.log(p);
for (i in a) {
    a[i].onmouseover = function () {
        this.style.backgroundColor = "black";
    };
    a[i].onmouseout = function () {
        this.style.backgroundColor = "white";
    };
};

but as you can see i could’nt go any further
some help would be appreciated .