Example 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 3</title>
</head>
<body>
<h1 id="h">About Jordan</h1>
<div id="myDiv" style="background-color: #777777;color: #0b0b0b">
<p>
Jordan (Arabic: الأردن‎ Al-ʾUrdunn [al.ʔur.dunː]), officially the Hashemite Kingdom of Jordan (Arabic: المملكة الأردنية الهاشمية‎ Al-Mamlakah al-’Urdunniyyah Al-Hāshimiyyah), is an Arab country in Western Asia, on the East Bank of the Jordan River. Jordan is bordered by Saudi Arabia to the south and the east, Iraq to the north-east, Syria to the north and Israel and the Palestinian West Bank to the west. The Dead Sea is located along its western borders and the country has a 26-kilometre (16 mi) coastline on the Red Sea in its extreme south-west.[7] Jordan is strategically located at the crossroads of Asia, Africa and Europe.[8] The capital, Amman, is Jordan's most populous city as well as the country's economic, political and cultural centre.[9]

What is now Jordan has been inhabited by humans since the Paleolithic period. Three stable kingdoms emerged there at the end of the Bronze Age: Ammon, Moab and Edom. Later rulers include the Nabataean Kingdom, the Roman Empire, and the Ottoman Empire. After the Great Arab Revolt against the Ottomans in 1916 during World War I, the Ottoman Empire was partitioned by Britain and France. The Emirate of Transjordan was established in 1921 by the Hashemite, then Emir, Abdullah I, and the emirate became a British protectorate. In 1946, Jordan became an independent state officially known as the Hashemite Kingdom of Transjordan, but was renamed in 1949 to the Hashemite Kingdom of Jordan after the country captured the West Bank during the 1948 Arab–Israeli War and annexed it until it was lost to Israel in 1967. Jordan renounced its claim to the territory in 1988, and became one of two Arab states to sign a peace treaty with Israel in 1994.[10] Jordan is a founding member of the Arab League and the Organisation of Islamic Co-operation. The sovereign state is a constitutional monarchy, but the king holds wide executive and legislative powers.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#myDiv").toggle()


$("#h").mouseover(function (e) {
$("#myDiv").toggle(1000)
})
$("#h").mouseleave(function (e) {
$("#myDiv").toggle(1000)
})
})
</script>
</body>
</html>