Жирные слова должны становиться красного цвета при наведении на сам абзац . Код нужен на js

Вариантов как реализовать есть множество.

У Вас ошибка в том, что событие вешаете на элементы .some а нужно на всю строку.

Чтоб повесить на всю строку нам нужна оббертка (в моем примере тег p)

При наведении для всех дочерних элементов строки ищем элементы .some и меняем цвет на противоположный.

Так же, вы писали что цвет нужно менять текста а не фона а у вас меняется фон.

var allbl = document.querySelectorAll(".with-js");

function toggle(element) {
  element.style.color = element.style.color === "red" ? "black": "red";
}

allbl.forEach(function(el) {
  const items = el.querySelectorAll(".some")
  el.onmouseover = function() {
    items.forEach(item => {
      toggle(item)
    })
  }
  el.onmouseout = function() {
    items.forEach(item => {
      toggle(item)
    })
  }
});

<p class="with-js">
  Простой <b class="some">пример</b> небольшого текста, в <b class="some">котором</b> есть выделенные <b class="some">жирным</b> слова.
</p>

Функция toggle добавлена чтоб не дублировать код.

element.style.color = element.style.color === "red" ? "black": "red";

Такой вид - это упрощенная запись if (вместо if используем тернарный оператор ?)

это равноценно:

function toggle(element) {
  element.style.color = (function() {
    if (element.style.color === "red") {
      return "black"
    } else {
      return "red"
    }
  })()
}

Есть еще проще способ - добавлять и удалять класс для строки, а в css через класс дочерним элементам менять цвет.

UPD Как указал в комментариях пользователь teran:

вы пишите .forEach( item => toggle(item) ) по сути ваша анонимка просто пробрасывает значение в toggle. сигнатура у нее такая же. так что код можно упростить до .forEach(toggle) – teran

Достаточно написать:

var allbl = document.querySelectorAll(".with-js");

function toggle(element) {
  element.style.color = element.style.color === "red" ? "black": "red";
}

allbl.forEach(function(el) {
  const items = el.querySelectorAll(".some")
  el.onmouseover = function() {
    items.forEach(toggle)
  }
  el.onmouseout = function() {
    items.forEach(toggle)
  }
});

<p class="with-js">
  Простой <b class="some">пример</b> небольшого текста, в <b class="some">котором</b> есть выделенные <b class="some">жирным</b> слова.
</p>

p:hover .some{
  color:red;
} 

<p>Простой <b class="some"  >пример</b> небольшого текста.</p> 
<p>В <b class="some">котором</b> есть выделенные <b class="some">жирным</b> слова.</p>

Если вдруг понадобится решение без использования js, а только с помощью css.